vue 子组件向父组件传递信息,通知父组件更新视图
…javascript…
·
// 父组件parent.vue
<template>
<child v-on:triggerFunc="parentFunc"></child>
</template>
<script>
data(){
return {
temp: ''
}
}
<script>
methods: {
parentFunc(val) {
this.temp = val;
console.log(val);
}
}
</script>
// 子组件child.vue
<template>
<div @click="childFunc(value)"></div>
</template>
<script>
methods: {
// 子组件div的点击事件会触发childFunc方法,
// 在这个方法中用$emit触发父组件传进来的triggerFunc,然后父组件执行parentFunc更新视图
childFunc(value){
this.$emit('triggerFunc', value);
}
}
</script>
**数据流动过程**:
子组件点击事件childFunc,通过$emit触发triggerFun,
通知父组件中绑定的triggerFun执行parentFunc,改变父组件的data,更新视图
更多推荐
已为社区贡献1条内容
所有评论(0)