vue3父子组件传值；vue3子组件传值给父组件；vue3子组件监听父组件接口传值；父子组件事件调用

i_am_a_div_日积月累_

已于 2024-05-22 10:14:50 修改

阅读量1.1k

点赞数

分类专栏： vue3 文章标签： vue3父子组件父子组件传值子组件获取不到传值子组件获取值失败

于 2023-08-09 16:50:11 首次发布

本文链接：https://blog.csdn.net/i_am_a_div/article/details/132191998

版权

vue3 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

代码在文末，均可直接复制使用

本文主要描述，父子组件传值、调用等问题

文章目录

问题1：子组件接收不到父组件传值

如果父组件的值，在onMounted时候赋值，或者是接口等异步赋值，那子组件直接拿不到修改的值。子组件需要使用watch监听。
搜索子组件son.vue的watch查看

问题2：子组件接受的值，修改后，发现父组件值也改变了

如果不想改变，需要在子组件接受时候，进行深拷贝赋值----建议使用lodash的cloneDeep方法。建议都是以深拷贝，如果想改父组件的值，就单独子传父事件修改

问题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: {}
    })
    // 进行深拷贝赋值============建议使用lodash的cloneDeep方法=================
    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, immediate: true })

    // setTimeout(() => {
    //   state.str1VALUE = 'str1'
    // }, 2000);


    function setVal(){
      state.str1VALUE = '三次修改赋值'
      // state.data1VALUE = {
      //   name: '张三',
      //   age: 11
      // }
      state.data1VALUE.age = 33

      obj1VALUE.a = 3

      num1VALUE.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>

8.setup模式下子组件相互传值

在子组件1中发射事件到父组件，并传递参数。
在父组件中监听子组件1发射的事件，并将参数传递给子组件2。
在子组件2中定义带参数的方法。

父组件 index.vue

<template>
  <div>
    <ChildComponent1 @trigger-event="handleTriggerEvent" />
    <ChildComponent2 ref="child2" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'

// 获取子组件2的引用
const child2Ref = ref(null)

// 处理子组件1的事件，并将参数传递给子组件2的方法
const handleTriggerEvent = (payload) => {
  if (child2Ref.value) {
    child2Ref.value.someMethod(payload)
  }
}
</script>

子组件1 ChildComponent1.vue

<template>
  <button @click="triggerEvent">点击触发子组件2事件</button>
</template>

<script setup>
import { defineEmits } from 'vue'

const emit = defineEmits(['trigger-event'])

const triggerEvent = () => {
  const payload = { message: '来自子组件1的消息' }
  emit('trigger-event', payload)
}
</script>

子组件2 ChildComponent2.vue

<template>
  <div>子组件2的内容</div>
</template>

<script setup>
import { defineExpose } from 'vue'

// 定义带参数的方法
const someMethod = (payload) => {
  console.log('子组件2的方法被调用，参数为：', payload)
}

// 暴露方法给父组件
defineExpose({
  someMethod
})
</script>

解释：
父组件 index.vue：
包含两个子组件。
使用 ref 获取子组件2的引用。
定义一个方法 handleTriggerEvent，监听子组件1发出的事件，并接收参数，然后调用子组件2的方法并传递该参数。

子组件1 ChildComponent1.vue：
包含一个按钮，点击按钮时发射 trigger-event 事件到父组件，并传递一个 payload 参数。

子组件2 ChildComponent2.vue：
定义一个带参数的方法 someMethod，并通过 defineExpose 将子组件方法暴露给父组件。
通过这种方式，子组件1可以通过父组件间接触发子组件2的方法，并传递参数。这种设计保持了组件的解耦，并利用了 Vue 的事件系统和 ref 特性，确保了代码的可维护性和可读性。