Vue父子组件、子父组件、非父子组件通信

红太狼 2023-06-06 03:51 46阅读 0赞

1、父子组件传值通信，在子组件中使用props属性，静态或者动态传递父组件的变量值

<template>
      <div id="app">
        <div>
          <div style="display: inline-block;">
            <div class="btn-div btn-bg">{
       {msg}}</div>
          </div>
          <child-one :list="listItem"> </child-one>
        </div>
      </div>
    </template>
    
    <script>
      import Vue from 'vue'
      export default {
        name: 'App',
        data() {
          return {
            msg: "四大美女",
            listItem: ["春秋越过 西施", "汉朝  王昭君", "三国 貂蝉", "唐朝 杨玉环"]
          }
        },
        components: {
          'child-one': {
            template: '<div class="childDiv"><div v-for="item in list">{
       {item}}</div></div>',
            //使用props获取父组件的值 ，引用 <child-one :list="listItem"> </child-one>中的key=list
            props: ['list']
          },
        }
      }
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdjaGVuZ3d1MjAxMg_size_16_color_FFFFFF_t_70][]

2、子父组件通信，使用组件对象的$emit函数，绑定自定义事件将子组件的数据传递给父组件

实例：点击四大美女列表修改标题

<template>
      <div id="app">
        <div>
          <div style="display: inline-block;">
            <div class="btn-div btn-bg">{
       {title}}<span>{
       {subTitle}}</span></div>
          </div>
          
          <child-one  @childClickEv="getChildContent"> </child-one>
        </div>
      </div>
    </template>
    <script>
      import Vue from 'vue'
      export default {
        name: 'App',
        data() {
          return {
            title: "四大美女",
            subTitle:"",
          }
        },
        methods:{
          getChildContent:function(s){
            //this 当前父组件对象
            console.log("getChildContent---s="+s);
            this.subTitle=s;
          }
        },
        components: {
          'child-one': {
            //子组件元素绑定getBeautyInfo事件
            template: '<div class="childDiv"><div @click="getBeautyInfo" v-for="item in listItem" style="margin-top: 3px;">{
       {item}}</div></div>',
            data:function(){
             return{
               listItem: ["春秋越过 西施", "汉朝  王昭君", "三国 貂蝉", "唐朝 杨玉环"]
             }
           },
           methods:{
             getBeautyInfo:function(ev){
                  //this 当前子组件对象
                  //子组件元素的点击事件后 触发一个自定义事件childClickEv，第二个参数为子组件需要传递的参数
                  this.$emit('childClickEv',ev.target.innerHTML);
             }
           }
          },
        }
      }
    </script>

3、非父子组件之间的通信

实例 实现一个加减器

<template>
      <div id="app">
        <div>
          <child-add :count="count"></child-add>
          <div class="text-div btn-div">{
       {count}}</div>
          <child-sub :count="count" ></child-sub>
        </div>
      </div>
    </template>
    <script>
      import Vue from 'vue'
    
      var busVue=new Vue();
      export default {
        name: 'App',
        data() {
          return {
            count:0
          }
        },
       //把两个子组件的自定义事件挂载在busVue实例上
        mounted:function(){
          busVue.$on('addCountEv',function(n){
              this.count=n;
          }.bind(this));
          busVue.$on('subCountEv',function(n){
              this.count=n;
          }.bind(this));
        },
        components: {
          'child-add': {
            template: '<div @click="add"  class="btn-div btn-bg">{
       {addMsg}}</div>',
            data:function(){
              return{
                 addMsg:"增加"
              }
            },
            props:['count'],
            methods:{
              add:function(){
                 busVue.$emit("addCountEv",this.count+1);
              }
            }
           },
          'child-sub':{
             template: '<div @click="sub"  class="btn-div btn-bg">{
       {subMsg}}</div>',
             data:function(){
               return{
                  subMsg:"减少"
               }
             },
             props:['count'],
             methods:{
               sub:function(){
                 busVue.$emit("subCountEv",this.count-1);
               }
             }
          }
        }
      }
    </script>

![20191009235607824.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdjaGVuZ3d1MjAxMg_size_16_color_FFFFFF_t_70]: /images/20230601/19daa364fc324a1c850a257fd439c5dc.png
[20191009235607824.png]: /images/20230601/5fa36a3e71d34112a795dd4942d3808b.png