代码在文末,均可直接复制使用
本文主要描述,父子组件传值、调用等问题
文章目录
- 问题1:子组件接收不到父组件传值
- 问题2:子组件接受的值,修改后,发现父组件值也改变了
- 问题3:子组件接受值,修改后页面不更新
- 问题4:子传父事件,父组件接受值,赋值无效
- 5、子传父
- 6、父调用子
- 7、代码
问题1:子组件接收不到父组件传值
如果父组件的值,在onMounted时候赋值,或者是接口等异步赋值,那子组件直接拿不到修改的值。子组件需要使用watch监听。
搜索子组件son.vue的watch查看
问题2:子组件接受的值,修改后,发现父组件值也改变了
如果不想改变,需要在子组件接受时候,进行深拷贝赋值。建议都是以深拷贝,如果想改父组件的值,就单独子传父事件修改
问题3:子组件接受值,修改后页面不更新
在子组件接受简单数据类型时候,改成ref接受,生成响应式数据
具体查看: let num1VALUE = ref(props.num1) // 生成响应式数据 否则修改数据 页面不变化
问题4:子传父事件,父组件接受值,赋值无效
这是因为你父组件的那个变量,是使用reactive声明的。reactive 不要直接变量data=赋值!!!会丢失响应式的。如果用ref就不会 非要赋值要不就使用单个属性一个个赋值 obj.属性 = 属性值 、要不就给原对象多包裹一层对象
由此可见:声明尽量用ref。。。。
5、子传父
搜索
update:obj
查看。
6、父调用子
搜索
sonRef.value.childMethod()
查看
7、代码
父组件far.vue
<template><div><div>父:{{ state.str1 }}--{{ state.data1 }}--{{ obj1 }} -- {{ num1 }}</div><button style="border: 1px solid cyan;" @click="callChildMethod">父调子事件</button><hr><son ref="sonRef" :str1="state.str1" :data1="state.data1" :obj1="obj1" :num1="num1" @update:obj="getObj" /></div>
</template><script>
import { defineComponent, onMounted, reactive ,toRefs,ref} from 'vue'
import Son from './son.vue'export default defineComponent({components: {Son},setup() {const state = reactive({str1: '',data1: {}})let obj1 = reactive({a:1,})let num1 = ref(1)// 父接受子function getObj(val){obj1.a = val.a // reactive 不要直接data=赋值!!!会丢失响应式的,如果用ref就不会 非要赋值要不就使用 obj.属性 = 属性值 要不就给原对象多包裹一层对象// obj1 = val// obj1 = reactive({...val})console.log('父接受子',val,obj1);}// 父调用子事件const sonRef = ref(null)function callChildMethod() {sonRef.value.childMethod()}onMounted(() => {// 对于在onMounted或异步的数据 传递给子组件 子组件应该使用watch监听接受 否则拿不到数据setTimeout(() => {state.str1 = '二次赋值!'state.data1 = {name: 'Alice',age: 25}}, 1000);})return {state,obj1,num1,sonRef,getObj,callChildMethod}}
})
</script>
子组件son.vue
<template><div><div>子:{{ state.str1VALUE }}--{{ state.data1VALUE }}--{{ obj1VALUE }} -- {{ num1VALUE }}</div><button style="border: 1px solid cyan;" @click="setVal">按钮该值</button><button style="border: 1px solid cyan;" @click="setFarVal">子传父</button></div>
</template><script>
import { defineComponent, reactive, watch,toRefs,toRef,ref } from 'vue'export default defineComponent({props: {str1: String,data1: Object,obj1: Object,num1: Number,},emits: ['update:obj'],setup(props, { emit }) {const state = reactive({str1VALUE: '',data1VALUE: {}})let obj1VALUE = JSON.parse(JSON.stringify(props.obj1)) // 复杂数据类型obj如果不用深拷贝赋值 修改对象obj.name单一属性时候(state.data1VALUE.age = 33) 会导致父组件的源值改变 也会导致监听事件再次执行let num1VALUE = ref(props.num1) // 生成响应式数据 否则修改数据 页面不变化// 同时监听str1和data1 对于在onMounted或异步的数据 传递给子组件 子组件应该使用watch监听接受 否则拿不到数据watch([() => props.str1, () => props.data1], ([str1, data1]) => {console.log('监听',str1,data1);state.str1VALUE = JSON.parse(JSON.stringify(str1)) // 复杂数据类型obj如果不用深拷贝赋值 修改对象obj.name单一属性时候(state.data1VALUE.age = 33) 会导致父组件的源值改变 也会导致监听事件再次执行state.data1VALUE = JSON.parse(JSON.stringify(data1))}, { deep:true })// setTimeout(() => {// state.str1VALUE = 'str1'// }, 2000);function setVal(){state.str1VALUE = '三次修改赋值'// state.data1VALUE = {// name: '张三',// age: 11// }state.data1VALUE.age = 33obj1VALUE.a = 3num1VALUE.value = 3}// 子传父function setFarVal(){let obj = {a: 123456}emit('update:obj', obj);console.log('子传父',obj);}function childMethod(){console.log('子事件');}return {state,obj1VALUE,num1VALUE,setVal,setFarVal,childMethod}}
})
</script>