我是怎么学会vue的17:父子组件的通信

白话前端

父组件向子组件传递数据:props(父传子通过属性名传)

常用于请求列表数据:要显示ul->li列表时,父组件向服务器请求数据,数据存放在父组件里,并把数据传递给子组件,然后子组件使用 v-for 遍历显示。(因为子组件不能直接访问父组件或vue实例的数据)

传递方法

  1. 父组件data定义数据
  2. 在子组件的HTML标签中,使用 v-bind 自定义属性,并把父组件数据的值赋给属性
  3. 注册组件时,添加 props 属性,指定传入数据的类型、默认值、是否必须。

    注意:
    1.type支持的类型有:String、Number、Boolean、Array、Object、Date、Function、Symbol
    2、默认值:认值必须是一个函数
    3、props在子组件中有多种定义方式:既可以使用数组,也可以使用对象
    props写法1:传数组
    props:['cmovies','cmessages'] //cmovies、cmessages是变量名
    props写法2:传对象
    传对象的好处:可以给变量指定类型、提供默认值
    props:{
           cmovies:{
               type:Array,
               //default:"aaaaa",
               //类型是对象或数组时,默认值必须是一个函数。2.5.17以下的低版本可以写成default:[]
               default(){
                   return []
               },
               required:true
           }
    }
  4. 在子组件的模板中使用数据。
属性如果不是通过v-bind绑定的,则绑定的是字符串,不是变量;vue不会去父组件里找对应的变量给属性赋值。

当我们有自定义构造函数时,验证也支持自定义的类型。
image.png

props的驼峰标识

如果props里面的属性名需要使用驼峰标识命名,则组件标签绑定的属性名,需要使用减号分隔的形式命名。

<cpn :c-info="info" :child-my-message="message" v-bind:class></cpn>
props: {
   cInfo: {
      type: Object,
        default() {
          return {}
     }
}

组件模板中用到组件的地方也需要使用驼峰写法。

<template id="cpn">
  <div>
    <h2>{{cInfo}}</h2>
  </div>
</template>

子组件向父组件传递数据:通过自定义事件

使用情景:子组件点击了,需要告诉父组件 子组件发生了什么事件(点击事件),点击的是哪个。父组件根据我点击的不同内容去请求不同的数据。

步骤

  1. 子组件发射自定义事件

    • 子组件模板 绑定点击事件(或其他事件)
    • 定义点击事件的回调函数:发射事件(自定义事件的事件名、参数)
  2. 父组件监听自定义事件

    • 在父组件模板里面绑定自定义事件
    • 定义回调函数,用于接收传递的数据,并根据这个数据执行相应的动作。

演示

<!--父组件模板-->
<div id="app">
  <!--
  step2 在父组件模板里 绑定自定义事件。
  这里会默认把参数item传进去,不需要写。
  -->
  <cpn @item-click="cpnClick"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
  <!--step1 子组件模板 绑定点击事件 把参数item传进去-->
    <button v-for="item in categories"
            @click="btnClick(item)"> 
      {{item.name}}
    </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  // 1.子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 'aaa', name: '热门推荐'},
          {id: 'bbb', name: '手机数码'},
          {id: 'ccc', name: '家用家电'},
          {id: 'ddd', name: '电脑办公'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        // step1 发射事件: 自定义事件
        this.$emit('item-click', item)
      }
    }
  }

  // 2.父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        //step2 定义回调函数,用于接收传递的数据,并根据这个数据执行相应的动作
        console.log('cpnClick', item);
      }
    }
  })
</script>
</html>

注意

自定义事件的名称,不能使用驼峰写法!

比如这里我们自定义事件的命名,可以写itemclick,也可以写item-click,但是不能写itemClick,否则会报错。

如果是在脚手架里面则可以使用驼峰写法。

阅读 606

100 声望
7 粉丝
0 条评论
100 声望
7 粉丝
文章目录
宣传栏