vue父组件向子组件传值,不实时更新解决
vue父组件向子组件传值,不实时更新解决
在运用vue搭建项目将页面分成各个组件时,时常会遇到将父组件的请求到的数据传入子组件用于操作显示,然后将操作好的数据从子组件传出,因为vue经验不常用就会将其遗忘,所以特此将所阅读到并有所获的博客修改后记录下来,防止技术遗忘。
现在我们创建一个template子组件,子组件命名为hi-popSelect,并在父组件引入。
// 父组件引用
<hi-popSelect :isShow="isShowData" @func="getMsg"></hi-popSelect>
// 在父组件中的子组件标签中创建一个自定义属性isShow,将父组件的data里面的isShowData数据传入给子组件
// @func为子组件中传回来的为key值为func的数值
// getMsg则为父组件的函数,
// getMsg会将传入的func对应的数值传入自己的函数变量参数value,从而触发此函数
import popSelect from '../components/popSelect';
components: {
'hi-popSelect': popSelect
},
data(){
return {
isShowData: false //data属性,用于父组件传入子组件参数
}
}
methods: {
getMsg (data) {
this.isShowData = data;
},
}
创建子组件hi-popSelect:
<el-dialog class="hi-dialog" :visible.sync="currentIsShow">
</el-dialog>
// 父子传参(父传子)
props: ['isShow'],
// isShow为在父组件中的子组件标签中自定义的属性名
data(){
return {
currentIsShow: this.isShow,
// 在data里重新赋值,不改变父组件传值,
// this.isShow指代的是props里面的参数isShow
}
}
watch: {
// 因为在vue生命周期中子组件创建后只会赋一次值,之后父组件数值变化了,
// 子组件的数值也会变化,但显示的数据不会发生改变。
// 所以需要监听父组件传参变化重新赋值让子组件重新赋值。
// 此处的isShow并不是函数,而是对应的要赋值的变量名isShow
isShow (val) {
this.currentIsShow = val;
}
},
methods: {
// 关闭对话框并把值传给父组件 (子传父),此函数未调用
// 函数作用是当触发此函数时子组件会将key值为func的数值传给父组件,
// this.currentIsShow为变量值
hideData () {
this.$emit('func', this.currentIsShow);
},
}
最后,非常感谢原博客博主,地址: 原博客地址