Vue 2.0 组件间的通讯

65 阅读 0 评论 43 点赞

我是靠谱客的博主调皮奇迹，最近开发中收集的这篇文章主要介绍Vue 2.0 组件间的通讯，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一.父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性

父组件数据如何传递给子组件呢？可以通过props属性来实现
父组件：
//这里必须要用 - 代替驼峰
data(){ return { msg: [1,2,3] }; }
子组件通过props来接收数据: 方式1：
props: ['childMsg']
方式2 :
props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告 }
方式3：
props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 } }

作者：Sky飞羽
链接：https://www.jianshu.com/p/8e705bb0bb4b
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

4.保存修改的文件，查看浏览器

5.我们依然可以对message的值进行v-bind动态绑定

此时浏览器中

父组件向子组件传值成功
总结一下：

子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

二.子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

4.保存修改的文件，在浏览器中点击按钮

子组件向父组件传值成功
总结一下：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

三.子组件向父组件传值（v-model 方式）

也可以使用 v-model 方式来直接绑定父组件变量，把数据从子组件传回父组件。

子组件：

children.vue

<template>
    <div>
      <h3>我是子组件</h3>
      <button @click="add">+1</button>
    </div>
</template>

<script>
    export default {
        name: "children",
        data(){
          return{
            counter : 0
          }
        },
      methods:{
          add(){
            this.counter += 1;
            this.$emit('input',this.counter);
          }
      }
    }
</script>

<style scoped>

</style>

父组件这样写：

<template>
  <div class="message_list">
      <h3>子组件的值：{{childrenVal}}</h3>
      <children v-model="childrenVal"></children>
  </div>
</template>

<script>
  import children from '@/components/children'
  export default {
    data(){
      return{
        childrenVal:''
      }
    },
    components:{
      children : children
    },
    methods:{

    }
  }
</script>

<style lang="scss">

</style>