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>