目录
本文主要介绍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修饰符为组件绑定原生事件，应具体情形而定。
版权声明：本文为weixin_44827643原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。