vue 给组件动态传递参数

在Vue中，可以通过props和$emit两种方式实现给组件动态传递参数。
1. 使用props方式：
在父组件中，可以通过在子组件标签上使用v-bind来传递参数。例如，将父组件中的myAge传递给子组件的age属性：

<Child @sendMsg="process" :age="myAge" ref="child"></Child>

在子组件中，通过props来接收传递过来的参数。可以在props中指定参数的类型和默认值。

props: {
  age: {
    type: Number,
    default: 0
  }
}

然后在子组件中就可以直接使用这个参数了。

2. 使用$emit方式：
在子组件中，通过this.$emit('事件名称', 参数)来触发一个自定义事件，并将参数传递给父组件。例如：

send() {
  this.$emit('sendMsg', { name: this.name_, age: this.age });
}

在父组件中，通过在子组件标签上使用@eventName来监听子组件触发的事件，并在methods中定义相应的方法来接收参数。例如：

<Child @sendMsg="process"></Child>
methods: {
  process(msg) {
    console.log(msg);
  }
}

这样就可以实现组件间动态传递参数的功能。<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/qq_36990177/article/details/109882020)[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_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]