vue3.0 之父子组件传值
目录父子组件传值父传子 props方式 1:原始的 props 传值父组件子组件方式 2:使用 provide && inject父组件子组件provide 与 inject 的获取 setup 中的数据 ,传递到子组件父子通讯 案例父组件子组件父子组件传值父传子 props方式 1:原始的 props 传值父组件<template><div>父组件 --
·
目录
父子组件传值
父传子 props
方式 1:原始的 props 传值
父组件
<template>
<div>
父组件 -- {{ num }}
<RegChild :num="num" />
</div>
</template>
<script>
import RegChild from "./childCom/RegChild";
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "Reg",
components: {
RegChild,
},
setup() {
let num = ref(0);
return {
num,
};
},
});
</script>
子组件
<template>
<div>
<div>子组件 -- {{ num }}</div>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
name: "RegChild",
components: {},
// props: ["num"],
props: {
num: {
type: Number,
default: 0,
},
},
setup(proos) {
let state = reactive({
num: proos.num,
});
return {
...state,
};
},
});
</script>
方式 2:使用 provide && inject
- 父组件
<template>
<div>
<Son />
</div>
</template>
<script>
import Son from "./childCom/Son";
import { defineComponent, onMounted, ref, provide } from "vue";
export default defineComponent({
name: "About",
components: {
Son,
},
provide: {
name: "张三",
age: 20,
},
setup() {
provide("num", 88);
return {};
},
});
</script>
- 子组件
<template>
<div>
<div>子组件num -- {{ num }}</div>
<div>子组件name -- {{ name }}</div>
<div>子组件age -- {{ age }}</div>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs, inject } from "vue";
export default defineComponent({
name: "Son",
components: {},
props: ["num", "name"],
inject: ["age"],
setup() {
let state = reactive({
num: inject("num"),
name: inject("name"),
});
return {
...state,
};
},
});
</script>
父组件
- 父组件修改 count 的值,然后传值给子组件
- 父组件修改 userInfo 之中的 username 的值,传递给子组件
- 注意点:就是在子组件之中,使用
v-model
的时候,子组件可以修改父组件的值
<template>
<div>
<div>
父组件count的值 -- {{ count }} 父组件username的值 -- {{ username }}
</div>
<div>
修改count
<button @click="addCount">修改count</button>
</div>
<div>
修改username
<button @click="setUsername">修改username</button>
</div>
<RegChild />
</div>
</template>
<script>
import RegChild from "./childCom/RegChild";
import { defineComponent, provide, ref, reactive, toRefs } from "vue";
export default defineComponent({
name: "Reg",
components: {
RegChild,
},
setup() {
let count = ref(0);
const addCount = () => {
count.value = count.value + 1;
};
let userInfo = reactive({
username: "张三",
});
const setUsername = () => {
userInfo.username = "李四";
};
provide("count", count);
provide("userInfo", userInfo);
return {
count,
addCount,
...toRefs(userInfo),
setUsername,
};
},
});
</script>
<style lang="scss" scoped></style>
子组件
<template>
<div>
<div>子组件count --- {{ count }}</div>
<div>子组件username --- {{ userInfo.username }}</div>
<div>
子组件的input修改 父组件的数据
<input type="text" v-model="userInfo.username" />
</div>
</div>
</template>
<script>
import { defineComponent, inject, reactive, watchEffect } from "vue";
export default defineComponent({
name: "RegChild",
components: {},
setup() {
let count = inject("count");
let userInfo = inject("userInfo");
return {
count,
userInfo,
};
},
});
</script>
<style lang="scss" scoped></style>
provide 与 inject 的获取 setup 中的数据 ,传递到子组件
+父组件
<template>
<div>
<Son />
</div>
</template>
<script>
import Son from "./childCom/Son";
import { defineComponent, provide, reactive, ref } from "vue";
export default defineComponent({
name: "About",
components: {
Son,
},
provide() {
return {
// 使用 this 是拿到 setup之中的 return的数据
obj: this.obj,
num: this.num,
// 不使用 this 直接赋值,这是直接传递数据过去
name: "张三",
age: 20,
};
},
setup() {
let num = ref(99);
let obj = reactive({
color: "yellow",
});
return {
num,
obj,
};
},
});
</script>
- 子组件
<template>
<div>
<div>子组件num -- {{ num }}</div>
<div>子组件name -- {{ name }}</div>
<div>子组件age -- {{ age }}</div>
<div>子组件obj -- {{ obj }}</div>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs, inject } from "vue";
export default defineComponent({
name: "Son",
components: {},
props: ["num", "name", "obj"],
inject: ["age"],
setup() {
let state = reactive({
num: inject("num", 0), //接受 父组件的值 , 定义默认值 0
name: inject("name", "默认值"),
obj: inject("obj"),
});
return {
...state,
};
},
});
</script>
父子通讯 案例
- 需求:就是父组件一个数组,里面有着两个对象,在子组件之中,点击删除父组件的数据
- 方式:使用 props + emit 的方式更为靠谱 与 习惯
父组件
<template>
<div>
<div>我是data --- {{ data }}</div>
<Test v-for="item in data" :key="item.id" :item="item" @remove="remove" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Test from "./childCom/Test.vue";
export default defineComponent({
name: "Home",
components: {
Test,
},
setup() {
let data = ref([
{
id: 1,
age: 20,
title: "第一",
},
{
id: 2,
age: 30,
title: "第二",
},
]);
const remove = (id: any) => {
data.value = data.value.filter((item) => item.id !== id);
};
return {
data,
remove,
};
},
});
</script>
子组件
- 子组件向父组件传值,还是使用 emit 发射事件的方式
- 首先的是子组件自定义事件
@click="remove(item.id)
并且传递值 - 需要在
emits: ["remove"],
注册该自定义事件 - 在 setup 组件 api 之中,使用该自定义事件,并且需要向父组件发送事件
ctx.emit("remove", id);
- 最后的时候,需要把当前的事件在
return
之中返回出去,给当前子组件使用
- 首先的是子组件自定义事件
<template>
<div>
<div>我是title{{ item.title }}</div>
<button @click="remove(item.id)">删除</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Test",
components: {},
props: {
item: Object,
},
// 注册自定义事件
emits: ["remove"],
// props 从父组件 传递的值 , ctx为上下文对象 this
setup(props, ctx) {
const remove = (id: any) => {
ctx.emit("remove", id);
};
return {
remove,
};
},
});
</script>
更多推荐
已为社区贡献15条内容
所有评论(0)