先创建一个 vue 项目，把不需要的删掉，在components中新建文件
目录结构
一、props 和 $emit
1.父组件向子组件传值
// App.vue
<template>
<div id="app">
<Parent></Parent>
</div>
</template>
<script>
import Parent from './components/Parent'
export default {
name: "app",
components: {
Parent,
}
};
</script>
// Parent.vue
<template>
<div>
父组件：{{number}}
<Son_1 :number="number"></Son_1>
</div>
</template>
<script>
import Son_1 from './Son_1'
export default {
name: "Parent",
components: {
Son_1,
},
data() {
return {
number: 10
};
},
methods: {}
}
</script>
// Son_1.vue
<template>
<div>
<div>子组件1: {{number}}</div>
</div>
</template>
<script>
export default {
name: "Son_1",
// props: ['number'],
props: {
number: {
type: Number,
required: true,
}
},
data() {
return {
};
},
methods: {}
}
</script>
总结：父组件通过在子组件的实例上加属性的方式，向子组件传值，子组件通过 props 接收所需要的值。
2.子组件向父组件传值。（通过事件的形式）
// Son_1.vue
<button @click='handleChangeNumber'>修改</button>
// Son_1.vue
methods: {
handleChangeNumber() {
this.$emit('numberChange', 9) // 第二个参数为传递的参数
}
}
// Parent.vue
<Son_1 :number="number" @numberChange="numberChange"></Son_1>
// Parent.vue
created() {
// this.$on('numberChange', this.numberChange) // 除了直接写在子组件上还可以在父组件监听这个事件
},
methods: {
numberChange(e) {
this.number = e
}
}
总结：子组件通过 $emit 方法去通知父组件，父组件接收到后，执行需要的操作。
二、$attrs 和 $listeners
名词解释
$attrs：继承所有的父组件属性（除了prop传递的属性、class 和 style），并且可以通过 v-bind="$attrs"传入内部组件，在创建更高层次的组件时非常有用。
$listeners：包含了父作用域中的（不包含.native修饰器）v-on 事件监听器，并且可以通过 v-on="$listeners" 传入内部组件，在创建更高层次的组件时非常有用。
// Parent.vue
<Son_1 :number="number" name="cherries" @numberChange="numberChange"></Son_1>
// Son_1.vue
<Grandson_1 v-bind="$attrs" v-on="$listeners"></Grandson_1>
// Son_1.vue
import Grandson_1 from './Grandson_1'
// Grandson_1.vue
<template>
<div>
<div>
Grandson_1: {{$attrs.name}}
</div>
<button @click="$listeners.numberChange(20)">修改</button>
</div>
</template>
<script>
export default {
name: "Grandson_1",
data() {
return {
};
},
}
</script>
三、Provide 和 Inject
名词解释
Provide： 在父级中注入数据
Inject：在任意子组件中可以注入父级数据
// Parent.vue
provide() {
return {
msg: "provide"
};
},
// Grandson_1.vue
// inject: ['msg'],
inject: {
msg: {
type: String,
}
},
四、Ref
名词解释
Ref：获取组件实例
// Parent.vue
<Son_1 :number="number" name="cherries" @numberChange="numberChange" ref="son_1"></Son_1>
// Parent.vue
mounted() {
console.log(this.$refs.son_1); // 获取到 Son_1 的实例
}
五、EventBus 用于跨组件之间通讯
// main.js
Vue.prototype.$bus = new Vue();
import Son_2 from './Son_2'
components: {
Son_1,
Son_2,
},
// Son_2.vue
mounted() {
this.$bus.$on("son_2", data => {
console.log(data);
});
},
// Grandson_1.vue
mounted() {
this.$nextTick(() => {
this.$bus.$emit("son_2", "我是Grandson_1");
});
},
