Vue组件通信

1.父传子

1.1 父组件传值

在父组件中，通过在子组件上添加属性，向子组件传递数据。

• 属性
  • 属性名
    • 命名规范：小写字母，单词以短横线-分隔。例如：my-attr
  • 属性值
    • 静态：直接赋值，默认为字符串类型。例如：<child post-msg="hello"></child>
      其他静态类型赋值方法，请参考：Vue官方文档 Prop
    • 动态：v-bind或其语法糖 :赋值变量。例如：<child :post-msg="msg"></child>

1.2 子组件接收值（Props）

子组件通过props接收父组件传递的数据。

1.2.1 Props属性名

props接收的属性名使用驼峰式命名。例如：myAttr。

props接收的属性名与父组件中以短横线分隔命名法的属性名一一对应。

例如：父组件在子组件上添加属性post-msg，子组件props通过属性名为postMsg接收。

1.2.2 Props属性值

（1）数组：每个元素代表一个父元素传递的属性名称。

实践一下

• 父组件：

<child :post-msg="msg" :count="123" size="small"></child>

• 子组件：

props:['postMsg', 'count', 'size']

（2）对象形式：用于props 验证

key：属性名称

value：（可以指定三种形式）

• 类型名：用于指定单一类型（类型构造函数名）。
• 数组：用于指定多种类型。
• 对象：Prop 验证
  • type属性：指定类型
  • required属性：是否必须传值
  • default属性：指定默认值

实践一下

• 父组件：

<child :post-msg="msg" :count="100" size="small"></child>

• 子组件：

props: {
    postMsg: String, 			// 指定单一类型
    count: [Number, String], 	// 指定多种类型
    size: {						// Prop 验证
      type: String,	// 指定类型
      required: false, // 必须传值
      default: "small", // 指定默认值
    },
    info: {  // 该属性父组件没有传递，子组件使用时，会使用其默认值
      type: Object,
      default: function () { // 指定默认值: 当类型为Array/Object时，默认值设置需要用函数返回
        return {
          name: "zhouxk1994",
          age: 18,
        };
      },
    },
  }

2.子传父

子组件通过 $emit 触发父组件的自定义事件来传递数据。

2.1 父组件自定义事件

（1）自定义事件名

与props在父子组件中的命名规范有区别。自定义事件名不需要手动在父子组件中进行驼峰式命名与短横线分隔式命名的转换，触发的事件名需要完全匹配自定义事件名称。

参考Vue官方文档的原话：

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 @myEvent 将会变成 @myevent——导致 myEvent 不可能被监听到。
因此，我们推荐你始终使用 kebab-case 的事件名。

实践一下

• 父组件：

<child @child-event="getChildData"></child>

（2）自定义事件
在父组件中通过自定义事件监听（不要添加参数），在子组件中触发后，就可以接收到子组件中传递回来的参数。

实践一下

• 父组件：

methods:{
    getChildData(arg){ // arg即子组件传递的数据
      console.log(arg);
    }
  }

2.2 子组件触发事件并传递数据

（1）子组件通过一定方式（按钮点击/生命周期钩子函数等）将数据通过$emit的方式触发父组件的自定义事件，并且发送数据给父组件。

实践一下

• 子组件：

template部分：这里使用按钮点击来向父组件传递数据

<button @click="sendDataToParent">按钮</button>

script部分

methods:{
    sendDataToParent(){
      this.$emit('child-event', '子组件消息');
    }
  }

这样就可以在父组件的getChildData函数的参数中接收到数据了。

（2）传递多个参数

方法一：直接以,隔开，传递多个参数。

this.$emit('child-event', 123, 'hello', true);

父组件的自定义监听事件可以不定义过多参数，直接通过arguments获得所有的实参。

methods:{
    getChildData(arg){
      console.log(arguments);
    }
  }

运行结果：

方法二：以数组的形式传递多个参数。

this.$emit('child-event', [123, 'hello', true]);

父组件的自定义监听事件可以通过参数得到该数组进行操作。

methods:{
    getChildData(arg){
      console.log(arg);
    }
  }

运行结果：