vue router-view 组件间传值
微wx笑
2021-06-10【前端开发】
578
3
0关键字：
vue router-view 组件间传值 props
在vue项目日常开发中，难免要把功能性组件抽离出来，这样结构就会出现父子组件，兄弟组件等，但是这样就会涉及到不同组件之间需要互相使用其中的变量值的问题。
在vue项目日常开发中，难免要把功能性组件抽离出来，这样结构就会出现父子组件，兄弟组件等，但是这样就会涉及到不同组件之间需要互相使用其中的变量值的问题。
情况一：router-view 子组件发生变化导致父组件发生改变
父组件中：
1 2 3 4 | <router-view @getMessage="showMsg"></router-view>showMsg (val) { // methods方法 val即为子组件传过来的值 console.log(val)} |
子组件中：
1 | this.$emit('getMessage', “传给父组件的值”); |
情况二：router-view 父组件发生变化导致子组件发生改变
父组件中：
1 2 3 4 5 | <router-view :searchVal="searchVal" :searchVal2="searchVal2" :searchVal3="postForm.searchVal3"></router-view>searchVal: '', // data里面申明searchVal2: '',postForm: { searchVal3: '' }this.searchVal = ‘需要传给子组件的值’; // 在需要传值的方法中处理 |
子组件中：
1 2 3 4 5 6 7 8 9 10 11 12 13 | props: ['searchVal', 'searchVal2', 'searchVal3'],watch: { searchVal: function (val) { console.log(val); // 接收父组件的值 }, searchVal2: function (val) { console.log(val); // 接收父组件的值 }, searchVal3: function (val) { console.log(val); // 接收父组件的值 } }, |
本文为转载文章，版权归原作者所有，不代表本站立场和观点。
