vue3 父组件子组件循环传值父组件

在Vue3中，父组件向子组件传值的方式与Vue2类似。使用子组件的props属性来接收父组件传递的值，并且通过v-bind指令将父组件的数据传递给子组件的props。这样子组件就可以直接使用父组件传递的值了。

在父组件中引入子组件时，需要使用v-bind指令将父组件的数据绑定到子组件的props上。例如，在父组件中引入名为"child"的子组件，可以使用以下方式传递值：

<child :par-obj="parObj"></child>

其中，`:par-obj`是子组件的prop名称，"parObj"是父组件中的数据。这样子组件就可以通过props接收到父组件传递的数据了。

而在子组件中，可以使用computed属性来监听父组件传递的props，并在set方法中通过$emit方法向父组件发送事件和数据。这样可以实现父组件和子组件之间的双向绑定。例如，可以使用以下方式来实现父组件和子组件之间的循环传值：

computed: {
  currentActiveNames: {
    get() {
      return this.activeNames; //父组件传给子组件的值
    },
    set(val) {
      this.$emit('on-change-activeNames', val); //改变由父组件控制
    }
  }
}

在上述代码中，currentActiveNames是子组件的computed属性，可以通过get方法获取父组件传递的值，并且通过set方法将子组件内部的改变反馈给父组件。通过触发`on-change-activeNames`事件，子组件就可以将新的值传递给父组件。

总结：在Vue3中，父组件向子组件传值的方式依然是通过props属性，而子组件向父组件传值可以通过computed属性和$emit方法实现双向绑定。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue 父子组件传值 子组件修改父组件值的解决办法](https://blog.csdn.net/jj_0628/article/details/102966527)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]