父组件触发子组件并传参

在父组件中可以通过在子组件标签上添加ref属性来引入子组件。例如，可以这样引入子组件：
<com1 ref="child" @parentNotic="parentNotic" :parenParamsTest="parenParams"></com1>

然后在父组件的data中声明子组件：
components:{
'com1':{
template:'<div> {{parenParamsTest}}----{{name}} <br> <button @click="parentNotic">点击父组件会执行一个方法</button> </div>',
props:['parenParamsTest'],
data () {
return {
name: '子组件名称',
val: '父组件调用专用参数'
}
},
methods: {
parentNotic() {
this.$emit("parentNotic", {'name': this.name,'val': this.val})
}
}
}
}

在父组件中，可以使用this.$refs.child.name来获取子组件的name属性，使用this.$refs.child.val来获取父组件的val属性。

这样，当父组件点击按钮触发parentNotic方法时，会向子组件发送一个名为parentNotic的事件，并传递一个包含子组件的name和父组件的val的对象作为参数。子组件可以通过监听这个事件来获取父组件传递的参数。<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/weixin_38860401/article/details/118001148)[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 ]