vue 组件通信

1. 父子组件通信

1.1 父传子值

• props

// parent
<Children msg="success" />

// children
props: {
    msg: String
}

1.2 子传父值

• $refs  子传父值，父改子值。

// parent
<Children ref="cld" />

mounted(){
    console.log(this.$refs.cld.content)
    this.$refs.cld.content='我是父组件修改后的内容'
}

// children
data(){
    content: '我是子组件的内容'
}

• $children   子传父值，父改子值。子元素不保证顺序。

// parent
mounted(){
    console.log(this.$children[0].content)
    this.$children[0].content='我是父组件修改后的内容'
}

// children
data(){
    content: '我是子组件的内容'
}

• $emit  自定义事件，观察者模式，子组件派发，子组件监听

// parent
<Children @foo="onFoo" />

data(){
    return {
        who:''
    }
},
methods:{
    onFoo(value){
        this.who=value
        console.log(`我被${value}点击了!`)
    }
}

// children
<button @click="onBtnCK">点击</button>

methods:{
    onBtnCK(){
        this.$emit('foo','children1')
    }
}

1.3 v-model 

• vue2

// 传1个值
// parent
<Children v-model="name" />
// v-model 相当于 <Children :value="name" @input="name=$event"/>

// children
<input :value="value" @input="onInput" />

<script>
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  methods: {
    onInput(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>



// 传多个值
// parent
<Children v-model="name" :age.sync="age"/>

// children
<input :value="value" @input="onInput" />
<input :value="age" @input="onAgeInput" />

<script>
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    age: {
      type: String,
      default: "",
    },
  },
  methods: {
    onInput(e) {
      this.$emit("input", e.target.value);
    },
    onAgeInput(e) {
      this.$emit("update:age", e.target.value);
    },
  },
};
</script>

• vue3      vue2升级vue3的命令  vue add vue-next

// 传1个值  接受值的名字是modelValue,而不是value;触发的事件是update:modelValue，而不是input
// 也可以使用传多个值的方式传1个值
// parent
<Children v-model="name" />

// children
<input :value="modelValue" @input="onInput" />

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: "",
    },
  },
  methods: {
    onInput(e) {
      this.$emit("update:modelValue", e.target.value);
    },
  },
};
</script>



// 传多个值
// parent
<Children v-model:name="name" v-model:age="age"/>

// children
<input :value="name" @input="onInput" />
<input :value="age" @input="onAgeInput" />

<script>
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    age: {
      type: String,
      default: "",
    },
  },
  methods: {
    onInput(e) {
      this.$emit("update:name", e.target.value);
    },
    onAgeInput(e) {
      this.$emit("update:age", e.target.value);
    },
  },
};
</script>

2. 兄弟组件通信 

• $parent 或 $root    通过共同组辈组件搭桥

// parent
<Brother1 />
<Brother2 />

// brother1
<button @click="print">点击</button>

methods:{
    print(){
        this.$parent.$emit('showInfo','来自brother1的信息') // 通过父组件派发
    }
}

// brother2
created() {
    this.$parent.$on("showInfo", this.execute); //通过父组件监听
},
methods: {
    execute(msg) {
        console.log(`我是brother2执行的，内容是${msg}`);
    },
},

3. 祖先和后代通信 

• provide - inject   只能祖先传给后代，适用于组件库开发，不推荐直接应用于程序代码中。inject传入的值，在后代中不建议修改，可以通过传入方法来修来祖先的值。

// ancestor
provide(){
    name:'ancestor'
}

// descendant
inject: ['name']

4. 任意组件间通信

• $bus    事件总线(vue3已废弃)，创建一个Bus类负责事件派发，监听和回调管理。使用方法类似于$parent

// main.js Vue原型中添加一个Bus实例，用Vue替代Bus,Vue已实现相应功能
Vue.prototype.$bus = new Vue()

// comp1
methods:{
    btnClk(){
        this.$bus.$emit('action','来自comp1')
    }
}

// comp2
created(){
    this.$bus.$on('action')
},
methods:{
    action(value){
        console.log(value)
    }
}

• vuex