Vue之父子组件的通信

Posted 2020-12-17 haoqirui

在开发中，我们从服务器请求到了很多数据，并传到了整个页面的大组件，但是有一部分数据是使用小组件来展示。这个时候我们不要让小组件再次发起网络请求，而是由父组件传数据给子组件。

1.父传子

通过props(属性)向子组件传递数据，props的值有两种方式

方法1：字符串数组，数组中的字符串就是传递时的名称。

父组件：

const app = new Vue({
      el: ‘#app‘,
      data: {
        message: ‘你好啊！‘,
        movies:[‘海贼王‘, ‘第一滴血‘, ‘疯狂的石头‘]
      },
      components: {
        // es6也可以直接写成cpn
        ‘cpn‘:cpn
      }
    })

子组件及模版文件(注意在变量外有一个根元素div包裹)：

const cpn = {
      template : ‘#cpn‘,
      props:[‘cmovies‘, ‘cmessage‘]
    }

  <template id="cpn">
    <div>
      <h2>{{cmessage}}</h2>
      <p>{{cmovies}}</p>
    </div>
  </template>

传递消息，注意使用了v-bind绑定指令

<div id="app">
    <cpn :cmovies="movies" :cmessage="message"></cpn>
  </div>

方法2：对象，对象可以设置传递时的类型，也可以设置默认值。

上面的props还可以写成别的类型，比如对象，这样就可以类型限制了。

props:{
        cmovies: Array,
        cmessage: String
      }

还是提供默认值以及其它很多属性 比如required：true表示必传，或者自己写个验证，或者完全自定义类型。

props: {
        cmessage: {
          type:String,
          default: ‘aaaaaa‘
        },
        cmovies: {
          type:Array,
          default: [‘第一滴血2‘]
        }

注意在低版本的Vue中default得写成类似data的函数。还有props的数据名称不要使用驼峰体，因为html的attribute名是大小写不敏感的。最好是写成c-movies这种形式。

2.子传父

通过自定义事件向父组件发送消息

子组件，通过$emit来触发事件

    const cpn = {
      template: ‘#cpn‘,
      // data是子组件的数据
      data(){
        return {
          categroies:[
            {id:‘A‘, name:‘热门推荐‘},
            {id:‘B‘, name:‘手机数码‘},
            {id:‘C‘, name:‘白色家电‘},
            {id:‘D‘, name:‘电脑办公‘}
          ]
        }
      },
      methods:{
        btnClick(item) {
          // emit是发射事件，item-click是事件名称
          this.$emit(‘item-click‘, item)
        }
      }
    }

模版文件

  <template id="cpn">
    <div>
      <button v-for="item in categroies" @click="btnClick(item)">
        {{item.name}}
      </button>
    </div>
  </template>

父组件则直接接受参数，

    const app = new Vue({
      el: ‘#app‘,
      components: {
        cpn
      },
      methods: {
        cpnClick(item) {
          console.log(item);
        }
      }
    })

使用子组件传来的数据

  <div id="app">
    <!-- 注意这种自定义事件不需要写上参数，因为没有默认的浏览器event事件 -->
    <cpn @item-click="cpnClick"></cpn>
  </div>