长沙高端网站建设服务,网站频繁被攻击怎么办,阜宁网站建设找哪家好,设计企业网站首页代码在文末#xff0c;均可直接复制使用 本文主要描述#xff0c;父子组件传值、调用等问题 文章目录 问题1#xff1a;子组件接收不到父组件传值问题2#xff1a;子组件接受的值#xff0c;修改后#xff0c;发现父组件值也改变了问题3#xff1a;子组件接受值#xf…代码在文末均可直接复制使用 本文主要描述父子组件传值、调用等问题 文章目录 问题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
templatedivdiv父{{ state.str1 }}--{{ state.data1 }}--{{ obj1 }} -- {{ num1 }}/divbutton styleborder: 1px solid cyan; clickcallChildMethod父调子事件/buttonhrson refsonRef :str1state.str1 :data1state.data1 :obj1obj1 :num1num1 update:objgetObj //div
/templatescript
import { defineComponent, onMounted, reactive ,toRefs,ref} from vue
import Son from ./son.vueexport 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
templatedivdiv子{{ state.str1VALUE }}--{{ state.data1VALUE }}--{{ obj1VALUE }} -- {{ num1VALUE }}/divbutton styleborder: 1px solid cyan; clicksetVal按钮该值/buttonbutton styleborder: 1px solid cyan; clicksetFarVal子传父/button/div
/templatescript
import { defineComponent, reactive, watch,toRefs,toRef,ref } from vueexport 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
