一、父子组件间传值
vue3.0和2.0父子传参时略有区别，因为在setup起点函数中无法使用this指向组件实例，所以，变化主要是在子组件中，可以在setup起点函数中接收到props和{emit}参数，即：setup(props, { emit }){}，依此来实现父子传值
1. 在父组件中
与2.0比几乎没什么变化
<template>
<div>
<div>{{ title }}</div>
<div>
<HelloWorld :msg="msg" @change="changep"></HelloWorld>
</div>
</div>
</template>
<script>
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
setup() {
let title = ref("父组件");
let msg = ref("我是父组件传递给子组件的参数");
const changep = (e) => {
console.log(e);
title.value = e;
};
return { msg, title, changep };
},
};
</script>
2. 在子组件中
- setup的第一个参数props，可以实现在setup中，使用父组件传过来的值
- setup的第二个参数解构出emit，可以用于子组件发布事件
<template>
<div class="hello" style="background: #938711; padding: 10px">
<div>子组件</div>
<div>{{ msg }}</div>
<button @click="changParent">子传父触发按钮</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: {
type: String,
default: "",
},
},
setup(props, { emit }) {
console.log(props);
// 子传父
const changParent = () => {
emit("change", "我是子组件传递给父组件的参数");
};
return { changParent };
},
};
</script>
二、父组件给子组件、孙组件、共享数据和方法
vue2.0通过 provide inject 来实现，vue3.0也一样,只是使用方式不同
1. 在父组件中
- 总结
- provide()函数可以多次被调用
- 数据和方法需要用ref()创建成响应式的
- 使用
- 引入provide：import { provide, ref } from "vue";
- 使用provide提供共享的数据和方法：provide("pmsg", pmsg);
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { provide, ref } from "vue";
export default {
name: "App",
components: { HelloWorld },
data() {
return {
msg: "父属性",
};
},
setup() {
const pmsg = ref("父属性");
const pchange = ref(() => {
console.log("父方法");
});
provide("pmsg", pmsg);
provide("pchange", pchange);
},
};
</script>
- 在子组件中
- 总结
inject ()函数可以多次被调用 - 使用
- 引入inject ：import { inject } from "vue";
- 使用inject()获取父组件提供的数据和方法：provide("pmsg", pmsg);
<template>
<div class="hello" @click="change">{{ msg }}</div>
</template>
<script>
import { inject } from "vue";
export default {
name: "HelloWorld",
setup() {
const msg = inject("pmsg");
const change = inject("pchange");
return { msg, change };
},
};
</script>
