Vue.js之子组件操纵父组件的数据

本文主要介绍Vue.js中子组件如何操纵父组件的数据，前面的文章介绍了父组件可以通过props向子组件传递自身的数据，那么子组件怎么操纵父组件中的数据、怎么向父组件传递数据呢？下面进行具体介绍。

1.props单向传递

子组件通过props属性接受父组件的数据，这一过程是单向的。除一些引用数据类型外，当改变接受值时，父组件的相应值并不发生变化。

以下实例中，当点击按钮后，m变为200，但父组件中的msg未变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>

<body>
    <div id="app">
        <test :m="msg"></test>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        Vue.component('test', {
            props: ['m'],
            data: function() {
                return;
            },
            template: `<div><div v-text="m"></div><button @click="m=200">点击</button></div>`
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 100
            }
        })
    </script>
</body>

</html>

2.子组件绑定自定义事件

（1）于子组件的模板元素中绑定自定义事件，语法格式为：

@普通事件名（如click）=”$emit(自定义事件名)”

（2）在子组件使用时绑定自定义事件，例如下面实例中的

@pushfruit=’ 操作…’

由此便可实现子组件对父组件数据的操纵

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <menu-item :mlist="list" @pushfruit='list.push("lemon")'></menu-item>
    </div>
    <script src="./vue.min.js "></script>
    <script>
        // （mlist.push("lemon")）直接在子组件中操作，父组件中的数据会改变（前提是数组、对象等引用数据类型），但不建议这样做，因为props是单向数据流。

        // 建议方法：为子组件绑定自定义事件，在父组件中通过绑定该事件操作父组件的数据
        Vue.component('menu-item', {
            props: ['mlist'],
            data: function() {
                return {};
            },
            template: `
           <div>
            <ul>
            <li v-for="item in mlist" v-text="item"></li>
            </ul>
            <div><button @click='$emit("pushfruit")'>点击添加lemon</button></div>
            </div>
            `
        });
        let vu = new Vue({
            el: '#app',
            data: {
                list: ['apple ', 'pear ', 'watermelon '],
                fruitsItem: ' '
            }
        });
    </script>
</body>

</html>

3.子组件绑定自定义事件并传递数据

在上面实例中的$emit函数中，添加的第二个参数即是子组件传递给父组件的数据。下面实例通过子组件向父组件传递指定值改变字体的大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div :style="{fontSize:fSize+'px'}">病勉然，珍种自舟病仍事。</div>
        <son @enlarge="addF($event)"></son>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        Vue.component('son', {
            data: function() {
                return {}
            },
            template: `<button @click='$emit("enlarge",20)'>点击</button>`
        })
        let vu = new Vue({
            el: '#app',
            data: {
                fSize: 20
            },
            methods: {
                addF(n) {
                    this.fSize += n
                }
            }
        })
    </script>
</body>

</html>

4.补充

自定义事件的另一种写法：

首先，子组件中的写法不变，绑定基本事件，通过方法的调用声明自定义事件。其次，在父组件使用子组件的步骤（下例中child-a是子组件）：

 <child-a ref="get1"></child-a>

通过生命周期函数进行绑定：

mounted(){
    this.$refs.get1.$on('getInfo1',this.getInfo1)
  }

getInfo1为methods中的方法.

当然，也可直接省去自定义事件的步骤，直接利用native修饰符为组件绑定原生事件，应具体情形而定。

原文链接：https://blog.csdn.net/weixin_44827643/article/details/125878391

1.props单向传递

2.子组件绑定自定义事件

3.子组件绑定自定义事件并传递数据

4.补充

你可能也喜欢