父子组件传值
父传子 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"],
setup(proos) {
let state = reactive({
num: proos.num,
});
return {
...state,
};
},
});
</script>
方式 2:使用 provide && inject
父组件
<template>
<div>
<RegChild />
</div>
</template>
<script>
import RegChild from "./childCom/RegChild";
import { defineComponent, onMounted, ref, provide } from "vue";
export default defineComponent({
name: "Reg",
components: {
RegChild,
},
setup() {
provide("num", 88);
return {};
},
});
</script>
子组件
<template>
<div>
<div>子组件 -- {{ num }}</div>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs, inject } from "vue";
export default defineComponent({
name: "RegChild",
components: {},
props: ["num"],
setup() {
//proos
let state = reactive({
num: inject("num"),
});
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>