1、父组件props传值给子组件。

子组件中定义props字段，类型为Array（如需限制字段值类型，也可以定义为Object的形式）。如下例子，父组件挂载子组件helloWorld，在组件标签上给title赋值，子组件helloWorld定义了props属性，里面有一个值是title，这样子组件就可以使用父组件传递过来的值了。

父组件：home.vue

javascript"><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

javascript"><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扩展示例

javascript"><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

javascript"><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

javascript"><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。

javascript">// 子组件
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

javascript"><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

javascript"><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

javascript"><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

javascript"><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

javascript"><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

javascript"><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

javascript"><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>