1、父组件props传值给子组件。
子组件中定义props字段，类型为Array（如需限制字段值类型，也可以定义为Object的形式）。如下例子，父组件挂载子组件helloWorld，在组件标签上给title赋值，子组件helloWorld定义了props属性，里面有一个值是title，这样子组件就可以使用父组件传递过来的值了。
父组件：home.vue
<template>
<div>
<aaaChildren>
<template #default="scope">
<h1>{{ scope.info.age }}</h1>
</template>
<template #text="scope">
<h2>{{ scope.data }}</h2>
</template>
</aaaChildren>
</div>
</template>
<script>
import aaaChildren from './children/index.vue'
export default {
name:'aaa',
components:{
aaaChildren
}
}
</script>
子组件：hello-world.vue
<template>
<div class="hello">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "helloWorld",
props:["title"] // 接收传递过来的值
}
</script>
（1.）props扩展属性
文档传送门
| 属性名 | 值 | 描述 |
| type | javaScript数据类型 | 限制props的类型 |
| default | 默认值 | props的默认值 |
| required | Boolean | 是否必须 true为必须 |
| validator | 回调函数 默认参数为props的值 | 对props的值做处理 返回值必须是Boolean |
（2.）props扩展示例
<template>
<div class="hello">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "helloWorld",
props: {
title: String, // 限制必须是字符串类型
age: {
type: Number,
default: 0,
required: true,
validator: (value) => {
return value >= 0
}
},
list: {
type: Object,
default: () => ({}) // 引用类型的默认值 必须用一个箭头函数返回
}
}
}
</script>
2、子组件$emit传值给父组件。
子组件传值给父组件，需要在子组件中触发一个事件，在事件中，调用$emit(‘父组件的方法名’, ‘传递的值’)，然后在父组件中，通过在子组件标签上自定义事件函数，接收传递过来的值。
父组件：home.vue
<template>
<div>
<hello-world @childEvent="parentEvent" />
</div>
</template>
<script>
import helloWorld from "../components/hello-world.vue";
export default {
name: "home",
components: {
helloWorld
},
data() {
return {}
},
methods: {
parentEvent(value) {
// 子组件传递过来的值
console.log(value)
}
}
}
</script>
子组件：hello-world.vue
<template>
<div class="hello">
<h1 @click="handle">{{ age }}</h1>
</div>
</template>
<script>
export default {
name: "helloWorld",
data() {
return {
age:18
}
},
methods: {
handle(){
this.age++
this.$emit("childEvent", this.age)
}
}
}
</script>
（1.）$emit传递多个参数
在$emit的第一个参数后面添加，父组件按顺序接收。或者直接传递一个Object。
// 子组件
this.$emit("childEvent", this.age, 'xxx', 'xxxx')
// or
this.$emit("childEvent", { a: 1, b: 2 })
// 父组件
parentEvent(value1, value2) {
console.log(value1)
console.log(value2)
}
(2.)$emit触发时的同时，父组件也传递参数
父组件：home.vue
<template>
<div>
<hello-world @childEvent="parentEvent(arguments, '我是父组件要携带的参数')" />
</div>
</template>
<script>
import helloWorld from "../components/hello-world.vue";
export default {
name: "home",
components: {
helloWorld
},
data() {
return {}
},
methods: {
parentEvent(childParam, parentParam) {
// 子组件传递过来的值，是个数组
console.log(childParam)
// 父组件传递的值
console.log(parentParam)
}
}
}
</script>
子组件：hello-world.vue
<template>
<div class="hello">
<h1 @click="handle">{{ age }}</h1>
</div>
</template>
<script>
export default {
name: "helloWorld",
data() {
return {
age:18
}
},
methods: {
handle(){
this.age++
this.$emit("childEvent", this.age, '第二个值')
}
}
}
</script>
3、祖先组件provide传递孙子组件inject接收。
允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。注意：provide 和 inject 绑定并不是可响应的，然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的
祖先组件：ancestor.vue
<template>
<div id="ancestor">
<Parent :keys="keys" />
</div>
</template>
<script>
import Parent from '../../components/parent'
export default {
name: 'ancestor',
components: {
Parent
},
provide() {
return {
obj: this.obj
}
},
data() {
return {
title: 'ancestor',
keys: 1998,
obj: {
set: 'hello provide'
}
}
}
}
</script>
父组件：parent.vue
<template>
<div id="parent">
<div class="head_box">
<Son :value="index" />
</div>
</div>
</template>
<script>
import Son from '../son'
export default {
name: 'parent',
components: {
Title
},
data() {
return {
index: 'WoW'
}
}
}
</script>
子组件：son.vue
<template>
<div id="son">
<div class="title_box">
<p>我是 {{ obj.set }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'son',
inject: {
obj: {
from: 'Communication',
default: {}
}
},
data() {
return {
index: 1
}
}
}
</script>
4、父组件$refs获取子组件数据。
在子组件标签上写上ref属性，父组件通过this.r e f s . n a m e . 方法名或者 t h i s . refs.name.方法名或者this.refs.name.方法名或者this.refs.name.属性名的方式可以访问子组件的数据和方法
父组件：parent.vue
<template>
<div>
<Son :title="msg" ref="hello" />
<button @click="parentEvent">我是父亲</button>
</div>
</template>
<script>
import Son from "../components/son.vue";
export default {
name: "parent",
data() {
return {
msg: "搜索音乐",
};
},
methods: {
parentEvent() {
this.$refs.hello.add();
console.log(this.$refs.hello.age);
},
},
components: {
HelloWorld
},
};
</script>
子组件：son.vue
<template>
<div class="hello">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
}
},
methods: {
add(){
console.log("我是子组件")
}
}
}
</script>
