Vue基础之组件通信(1)props、自定义事件$emit

组件化开发作为vue的几大特点之一，组件间通信是必须掌握的基础技能，props和$emit 是父子组件通信最基础的两种方式。

props

• 用法
  在子组件上用v-bind的方式传入值，在组件内使用props接收

父组件 Dad.vue

<template>
  <div class="Dad">
    <h1>父组件</h1>
    <child msg="一段来自父组件的数据"></child> //子组件
  </div>
</template>

子组件 Child.vue

<template>
  <div class="child">
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    msg: {
      default: ""
    }
  }

• 效果：

如果传的值为动态数据，即为data中定义的数据
使用v-bind指令

<child v-bind:msg="title"></child>
<script>
export default {
	data() {
    	return {
      		title: "这是来自父组件的文字-Dad",
    	}
	}
}
</script>

更经常使用的是缩写<child :msg="title"></child>即可

自定义事件$emit()

• 用法

  概要来说：这种传值方式就是在子组件上使用$emit()定义一个事件，在父组件上使用v-on 事件监听器接收数据

子组件

<template>
  <div class="child">
    <button @click="sendInfo">点击向父组件传值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "一段子组件上的文字"
    };
  },
  methods: {
    sendInfo() {
      this.$emit("childEvent", this.title);
    }
  }
};
</script>

• 解释：
  在子组件上的按钮触发了点击事件，执行sendInfo方法。
  触发了自定义的childEvent事件，并且传递子组件的数据。
  在父组件上用v-on 事件监听器 监听到事件 childEvent 后 使用showTitle方法接收参数。

父组件

<template>
  <div class="Dad">
    <h2>Dad.vue</h2>
    <div>子组件传来的数据：{{ title }}</div>
    <child @childEvent="showTitle"></child> //这里的 @事件名 == v-on:事件名，一种简写方式（基本都是这样写）
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "null" //初始没有值
    };
  },
  methods: {
    showTitle(data) {
      this.title = data;
    }
  }
}
</script>

• 效果：
  
  点击后