标签：遇到 eth 点击 new mit script 自定义 one 按钮
vue中我们会遇到很多父子组件通信的需求，
下面简单列一下，父子组件通信的几种情况
1：父组件向子组件传值：使用prop向子组件传值；
2：子组件实时监听父组件传来的值的变化：使用watch去监听父组件传来的值；
3：父组件可以通过this.$refs.name.去访问子组件的值或方法；
4：子组件可以通过this.$parent.去访问父组件的值或方法；
总结了一下，感觉好像挺全面的，好像不缺啥了。。。。
但是仔细一想，父组件如何去监听子组件的值呢？如何根据子组件中的某个值的变化，父组件作出响应呢？？？？
研究了一下，需要借用vueX！！！！超级大无敌的vueX
上个例子：
先看子组件
<template> <div><el-button @click="dd()">自定义组件内的按钮</el-button> </div> </template> <script> import { mapGetters,mapActions } from ‘vuex‘; export default { watch:{ text:{ handler(newVal){ this.$store.dispatch(‘user/setText‘,newVal); }, immediate:true, } }, data(){ return { text:"自定义组件", } }, props:[‘propObj‘],//外部传值 methods:{ ...mapActions([ ‘setText‘ ]), dd(){ if(this.propObj.name==2){ this.propObj.name="哈哈"; this.text="自定义组件"; this.$emit(‘update:propObj‘, this.propObj) }else{ this.propObj.name=2; this.text="？？？？？？？？？？？？？？？？"; this.$emit(‘update:propObj‘, this.propObj) } } } } </script>
子组件中，点击按钮，会改变text的值，
我们用watch去监听，text值的变化，它如果变化了，就调用vueX中的actions方法，就是把vuex中的一个变量设置成text的值。
再来看看父组件中，只看computed即可：
<script> import { mapGetters } from ‘vuex‘; import Lala from ‘@/components/lala.vue‘; export default { computed: { ...mapGetters([‘childText‘ ]) }, } </script>
父组件中，将vueX中的一个getter值作为计算属性，这不是就完美的监听了子组件值的变化了嘛！！！有了以上的几种方法，感觉可以在组件之间任意穿梭了
标签：遇到 eth 点击 new mit script 自定义 one 按钮
原文地址：https://www.cnblogs.com/fqh123/p/11184987.html
