vue子组件改变父组件中data的值
1.子组件无法直接使用父组件中data的值2.prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。那么改如何在子组件中修改父组件的data中变量呢?既然子组件无法获取父组件的变量,那就让父组件自己修改自己的数据-->子组件调用自己的方法,该方法中调用this.$emit方法用来通知父组件“你该去修改你的变量啦”可以通过在子组件中调用this...
·
1.子组件无法直接使用父组件中data的值
2.prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。
那么改如何在子组件中修改父组件的data中变量呢?
既然子组件无法获取父组件的变量,那就让父组件自己修改自己的数据-->子组件调用自己的方法,该方法中调用this.$emit方法用来通知父组件“你该去修改你的变量啦”
可以通过在子组件中调用this.$emit方法,这个方法会通知父组件
components:{
mycom:{
template:'<input type="button" value="这是子组件按钮,用来触发父组件方法从而修改父组件的变量" @click="myshow">',
//通过点击子组件的按钮来触发子组件的myshow方法
methods:{//子组件的myshow方法触发父组件的函数(第一个参数用来触发父组件的方法,第二个参数是父组件方法的参数)
myshow(){
this.$emit('fun','子组件修改了')
}
}
},
}
父组件定义:
var vm=new Vue({
el:'#app',
data:{
msg:'父组件的data'
},
methods:{
change(data){
this.msg=data;
}
},
<div id="app">
//fun监听子组件触发fun事件,一旦子组件触发父组件就去调用自己的change方法修改变量
<mycom v-on:fun="change"></mycom>
</div>
更多推荐
已为社区贡献2条内容
所有评论(0)