关于Vue组件通讯那点事

头像
欧怼怼
    阅读 13 分钟
    1
    Github

    抽空梳理了一下Vue常用的组件之间的通讯方式，然后想通过使用的技术进行分类整理笔记。

    Prop传值

    使用范围

    父组件向子组件传值。

    使用方法

    父组件
    <template>
  <div id="app">
      <div class="app">
          <div class="title">App.vue</div>
      </div>
        <!-- 将text1绑定给Component1 -->
      <component1 :text="text1" />
  </div>
</template>

export default {
    name: 'App',
    components: {
        Component1,
    },
    data(){
        return{
            text1:"Text From App.vue",
        }
    }
}
</script>
    子组件
    <template>
    <div class="component1">
        <div class="title">Component1</div>
        <div>
            <!-- 将父组件传递过来的text进行展示 -->
            <span class="text-bold">text：</span>
            {{text}}
        </div>
    </div>
</template>

<script>
export default {
    name: "Component1",
    // 通过props来接收text
    props:{
        text:{
            type:String
        }
    },
}
</script>
    效果展示

    截屏2020-10-13 上午9.55.04.png

    注意

    父组件通过Prop传值给子组件是属于单向数据流，因此当父组件修改该值的时候，子组件也会随之更新数据；而子组件是不应该在内部改变 prop的。如果你可以这么做，但是Vue不推荐此做法，并会在控制台发出警告。

    v-on事件绑定

    使用范围

    子组件调用父组件方法。

    使用方法

    父组件
    <template>
  <div id="app">
      <div class="app">
          <div class="title">App.vue</div>
          <div>
              <span class="text-bold">count：</span>
              {{count}}
          </div>
      </div>
        <!-- 将事件addCount绑定给Component1 -->
      <component1 @addCount="addCount" />
  </div>
</template>

<script>
import Component1 from "@/components/Component1";

export default {
    name: 'App',
    components: {
        Component1
    },
    data(){
        return{
            count:0
        }
    },
    methods:{
        addCount(){
            this.count++;
        }
    }
}
</script>
    子组件
    <template>
    <div class="component1">
        <div class="title">Component1</div>
        <!-- Component1的button触发addParentCount -->
        <button @click="addParentCount">
            add count of App.vue
        </button>
    </div>
</template>

<script>
export default {
    name: "Component1",
    methods:{
        // 调用组件绑定的addCount方法
        addParentCount(){
            this.$emit('addCount')
        }
    }
}
</script>
    效果展示

    Kapture 2020-10-13 at 16.51.21.gif

    注意

    this.$emit() 的第一个参数为事件绑定的EventName，而从第二个参数开始为函数的参数，可以传多个参数值，意味着可以通过此方法从子组件传值给父组件。

    ref组件注册

    适用范围

    父组件获取子组件的值或调用子组件的方法。

    使用方法

    父组件
    <template>
  <div id="app">
      <div class="app">
          <div class="title">App.vue</div>
            <!-- 显示获取到的子组件的text -->
          <div>
              <span class="text-bold">text：</span>
              {{text2}}
          </div>
            <!-- 增加子组件的count值 -->
          <button @click="ChildrenCount">
              add count of Component1.vue
          </button>
      </div>
      <!-- 进行组件注册 -->
      <component1 ref="component1" />
  </div>
</template>

<script>
import Component1 from "@/components/Component1";

export default {
    name: 'App',
    components: {
        Component1,
    },
    data(){
        return{
            text2:''
        }
    },
    mounted() {
        // 获取子组件的text1值
        this.text2 = this.$refs.component1.text1 || '';
    },
    methods:{
        // 调用子组件的方法
        ChildrenCount(){
            this.$refs.component1.addCount();
        }
    }
}
</script>
    子组件
    <template>
    <div class="component1">
        <div class="title">Component1</div>
        <div>
            <span class="text-bold">count：</span>
            {{count}}
        </div>
    </div>
</template>

<script>
export default {
    name: "Component1",
    data(){
        return{
            // 父组件获取到此值
            text1: 'Text From Component1.vue',
            count: 0
        }
    },
    methods:{
        // 父组件调用此方法
        addCount(){
            this.count++;
        }
    }
}
</script>
    效果

    Kapture 2020-10-13 at 17.20.54.gif

    注意

    this.$refs 是组件渲染后才会进行填充，因此无法在计算属性 computed 使用，打印出来会显示 undefined 。

    EventBus事件总线

    使用范围

    任意组件间的事件调用。

    使用方法

    初始化EventBus

    共有两种方式可以初始化EventBus，第一种方式是新建一个 eventBus.js ，内容如下：

    import Vue from 'vue'
export const EventBus = new Vue()

    然后使用时均在两个组件内引入该文件。

    import { EventBus } from "../eventBus.js";

    而第二种方式是全局注册EventBus。

    在项目的 main.js 文件下，插入注册代码：

    Vue.prototype.$EventBus = new Vue()

    然后使用时即可通过 this.$EventBus 调用。

    后面的案例均用第二种方法实现。

    第一个组件
    <template>
    <div class="component2">
        <div class="title">Component2</div>
            <!-- 获取input值更新另一个组件的count值 -->
        <div>
            <input type="number" placeholder="Number..." v-model="value">
        </div>
        <!-- 点击button触发事件 -->
        <button @click="changeComponent1Count">
            change count of Component1
        </button>
    </div>
</template>

<script>
export default {
    name: "Component2",
    data() {
        return {
            value:''
        }
    },
    methods:{
        // 在EventBus总线注册changeCount事件，并将value值传过去
        changeComponent1Count(){
            this.$EventBus.$emit("changeCount",this.value)
        }
    }
}
</script>
    第二个组件
    <template>
    <div class="component1">
        <div class="title">Component1</div>
        <div>
            <span class="text-bold">count：</span>
            {{count}}
        </div>
    </div>
</template>

<script>
export default {
    name: "Component1",
    data(){
        return{
            count: 0
        }
    },
    // 在mounted中监听EventBus接收changeCount事件，并触发回调函数将value值赋给count
    mounted(){
        this.$EventBus.$on('changeCount',(value)=> this.count = value);
    }
}
</script>
    效果

    Kapture 2020-10-13 at 17.41.28.gif

    注意

    虽然在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，使得所有组件都可以上下平行地通知其他组件，但是若使用不慎，就会造成难以维护的“灾难”。

    Vue是单页应用，如果你在某一个页面刷新了之后，与之相关的 EventBus 会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面， EventBus 在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理 EventBus 在项目中的关系。通常会用到，在vue页面销毁时，同时移除 EventBus 事件监听。

    移除EventBus 事件监听的方法如下：

    // 移除指定事件
this.$EventBus.$off('changeCount')

// 移除所有事件
this.$EventBus.$off()

    &dollar;parent与&dollar;children

    使用范围

    通过插槽嵌套的父子组件进行事件调用和传值。

    使用方法

    App.vue
    <template>
  <div id="app">
      <component3>
          <component4></component4>
      </component3>
  </div>
</template>

<script>
import Component3 from "@/components/Component3";
import Component4 from "@/components/Component4";

export default {
    name: 'App',
    components: {
        Component3,
        Component4,
    }
}
</script>
    父组件
    <template>
    <div class="component3">
        <div class="title">Component3</div>
        <!-- 获取到子组件的text1值 -->
        <div>
            <span class="text-bold">text：</span>
            {{text2}}
        </div>
      
        <div>
            <span class="text-bold">count：</span>
            {{count}}
        </div>
        <!-- 增加子组件的count值 -->
        <button @click="addChildrenCount">
            add count of Component4.vue
        </button>
      
        <!-- 插槽 -->
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "Component3",
    data() {
        return {
            text1: 'Text From Component3.vue',
            text2:'',
            count: 0
        }
    },
    mounted() {
        // 获取子组件的text1值
        this.text2 = this.$children[0].text1;
        // 监听子组件调用changeCount，并将参数value赋值给父组件的count
        this.$on("changeCount",value => this.count = value);
    },
    methods:{
        addChildrenCount(){
            // 调用第一个子组件绑定的addCount方法
            this.$children[0].$emit('addCount');
        }
    }
}
</script>
    子组件
    <template>
    <div class="component4">
        <div class="title">Component4</div>
        <!-- 获取到父组件的text1值 -->
        <div>
            <span class="text-bold">text：</span>
            {{text2}}
        </div>
      
        <div>
            <span class="text-bold">count：</span>
            {{count}}
        </div>
      
        <div>
            <input type="number" placeholder="Number..." v-model="value">
        </div>
        <!-- 修改父组件的count值 -->
        <button @click="changeParentCount">
            change count of Component3.vue
        </button>
    </div>
</template>

<script>
export default {
    name: "Component4",
    data() {
        return {
            text1: 'Text From Component4.vue',
            text2:'',
            count: 0,
            value:''
        }
    },
    mounted() {
        // 获取父组件的text1值
        this.text2 = this.$parent.text1;
        // 监听父组件调用addCount，并将count++
        this.$on('addCount',() => this.count++);
    },
    methods:{
        changeParentCount(){
            // 调用父组件绑定的changeCount方法，并传入value参数
            this.$parent.$emit('changeCount',this.value)
        },
    }
}
</script>
    效果

    Kapture 2020-10-13 at 18.14.55.gif

    注意

    同 $refs ， $parent 和 $children 是组件渲染后才会进行填充，因此无法在计算属性 computed 使用。

    $children 返回的是一个数组，一个父组件可能有多个子组件，但一个子组件只能有一个父组件。

    provide与inject

    使用范围

    父组件向任一后代组件传值和方法，适用于正常嵌套和插槽嵌套。

    使用方法

    App.vue
    <template>
  <div id="app">
      <component3>
          <component4>
              <component5></component5>
          </component4>
      </component3>
  </div>
</template>

<script>
import Component3 from "@/components/Component3";
import Component4 from "@/components/Component4";
import Component5 from "@/components/Component5";

export default {
    name: 'App',
    components: {
        Component3,
        Component4,
        Component5,
    },
}
</script>
    父组件
    <template>
    <div class="component3">
        <div class="title">Component3</div>
        <div>
            <span class="text-bold">count：</span>
            {{count}}
        </div>
        <!-- 插槽 -->
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "Component3",
    // 向后代组件提供text和执行上下文this
    provide(){
        return{
            text:this.text1,
            component3:this
        }
    },
    methods:{
        addCount(){
            this.count++;
        }
    }
}
</script>
    子组件
    <template>
    <div class="component4">
        <div class="title">Component4</div>、
        <!-- 显示父组件的text值 -->
        <div>
            <span class="text-bold">text：</span>
            {{text}}
        </div>
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "Component4",
    // 接收父组件的text值
    inject:['text']
}
</script>
    孙组件
    <template>
    <div class="component5">
        <div class="title">Component5</div>
        <!-- 显示祖组件的text值 -->
        <div>
            <span class="text-bold">text：</span>
            {{text}}
        </div>
        <!-- 增加祖组件的count值 -->
        <button @click="addGrandParentCount">
            add count of Component3.vue
        </button>
    </div>
</template>

<script>
export default {
    name: "Component5",
    // 接收祖组件的text值和执行上下文
    inject:['text','component3'],
    methods:{
        // 通过祖组件执行上下文调用其方法
        addGrandParentCount(){
            this.component3.addCount();
        }
    }
}
</script>
    效果

    Kapture 2020-10-13 at 18.31.59.gif

    &dollar;attrs与&dollar;listeners

    使用范围

    孙组件获取祖组件的值或调用祖组件事件。

    使用方法

    祖组件
    <template>
    <div class="component6">
        <div class="title">Component6</div>
        <div>
            <span class="text-bold">count：</span>
            {{count}}
        </div>
                
        <!-- 祖组件向自己组件传递了text1与text2和一个addCount事件 -->
        <component7 :text1="text" :text2="text" @addCount="addCount" />
    </div>
</template>

<script>
import Component7 from "@/components/Component7";

export default {
    name: "Component6",
    components:{
        Component7
    },
    data() {
        return {
            text: 'Text From Component6.vue',
            count: 0
        }
    },
    methods:{
        addCount(){
            this.count ++
        }
    }
}
</script>
    父组件
    <template>
    <div class="component7">
        <div class="title">Component7</div>
        <div>
            <span class="text-bold">text：</span>
            {{text1}}
        </div>
        <!-- 将不被父组件prop识别的attribute绑定到孙组件，也将祖组件的事件绑定到孙组件 -->
        <component8 v-bind="$attrs" v-on="$listeners" />
    </div>
</template>

<script>
import Component8 from "@/components/Component8";

export default {
    name: "Component7",
    // 父组件prop识别了text1，因此text1不会传递到孙组件
    props:{
        text1:{
            type:String
        }
    },
    components:{
        Component8
    }
}
</script>
    孙组件
    <template>
    <div class="component8">
        <div class="title">Component8</div>
        <div>
            <span class="text-bold">text：</span>
            {{text2}}
        </div>
        <button @click="addGrandparentCount">
            add count of Component6.vue
        </button>
    </div>
</template>

<script>
export default {
    name: "Component8",
    // 孙组件获取到祖组件的text2
    props:{
        text2:{
            type:String
        },
    },
    methods:{
        // 孙组件调用了祖组件的addCount事件
        addGrandparentCount(){
            this.$emit('addCount');
        }
    }
}
</script>
    效果

    Kapture 2020-10-13 at 20.34.35.gif

    注意

    $attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。因此当 text1 已被子组件prop获取后，在孙组件是获取不到 text1 的。

    前端vue.js
    欧怼怼
    22 声望0 粉丝
    « 上一篇
    Linux 定时备份你的MongoDB数据库
    下一篇 »
    实习第一天，上司让我学习一下Git Flow

    引用和评论

    推荐阅读
    头像
    简单手写实现Vue2.x

    欧怼怼阅读 1.8k

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.7k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    100个React最佳实践小技巧

    夕水赞 18阅读 2.9k评论 4

    头像
    前端开发工具

    寒青赞 16阅读 4.8k

    头像
    开发插件集合

    寒青赞 12阅读 3.2k

    头像
    Javascript(turfjs)等值线图绘制

    舍瓦温赞 15阅读 22.1k评论 18

    0 条评论
    得票最新