开发中用到最多的场景，父子组件通信，分发事件，组件传值。

Props 父组件向子组件通信

1
2
3
4
5
6
7
8
9
10
11
12
13
//找到找到父组件使用子组件的地方，为其添加父组件传递给子组件的数据
<parent> 
    title:'props传值',
    date:'2020/03 '
</parent>

//* 在子组件接收两个参数
export default {
	name:'child',
    props:['title','date']
}

//这样之后就可以在子组件像使用Vue date 一样使用title 和 date

$emit 子组件向父组件通信

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//$emit 方法是Vue的一个实例方法，他的用法如下
vm.$emit(eventName,[...args])
// 参数
1）{string} eventName
2) [...args]

//第一个参数eventName 为事件名称
//事件名称对应的事件是在 父组件中通过v-on监听一个native Dom事件（可以理解是一个类似click这样的自定义事件）


当我们在子组件中执行$emit时，就会触发父组件对应的event

1）首先我们在子组件中使用$emit方法去编写代码（不传递第二个参数），触发父组件的event


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//子组件
<template>
  <div class="home">
    <p>这里是Home组件</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>Yes</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>No</el-button>
  </div>
</template>
<script>
export default {
  name: 'Home',
  methods: {
    btnClickHandler: function(param){
        if(param == "Yes"){
            this.$emit('sayYes');
        }else if(param == "No"){
            this.$emit('sayNo');
        }
    }
  }
}
</script>

//父组件
<home
        v-on:sayYes='val="yes"'
        v-on:sayNo='val="no"'>
</home>
//val是父组件data里面的数据

$parent

$parent是vue的一个实例属性，它表示的就是当前组件的父实例。

假如父组件中有一个方法为sayYes，那么在子组件中就可以直接使用this.$parent.sayYes去调用父组件的方法。