组件是Vue核心功能之一,合理的组件化,可以减少我们代码的冗余,提高项目的可维护性,下面这篇文章主要给大家介绍了关于Vue中父子组件通信与事件触发的相关资料,需要的朋友可以参考下

一、组件

子组件lt;templategt; lt;div style="border:1px solid black;width:400px; height: 130px;"gt; lt;h3gt;我是子组件lt;/h3gt; lt;buttongt;子组件将值传递给父组件lt;/buttongt; lt;divgt;子组件接收父组件的值:lt;/divgt; lt;/divgt;lt;/templategt;

父组件lt;templategt; lt;div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;"gt; lt;h3gt;我是父组件lt;/h3gt; lt;divgt;子组件向父组件传递的值:lt;/divgt; lt;Childgt;lt;/Childgt; lt;/divgt;lt;/templategt;lt;scriptgt;import Child from './Child';export default { components: { Child }}lt;/scriptgt;

效果显示:

从这个图中，我们可以看到父子组件的结构。我们来练习一下亲子组件交流。

二、父子组件通信

父组件给子组件通信

实现思路:子组件通过props接受父组件传递的值。

在父组件中，定义一个数据变量，并将该值动态绑定到子组件标签中。

// Father.vuelt;templategt; lt;div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;"gt; lt;h3gt;我是父组件lt;/h3gt; lt;divgt;子组件向父组件传递的值:{{ChildMsg}}lt;/divgt; lt;Child :FatherMsg="data"gt;lt;/Childgt; lt;/divgt;lt;/templategt;lt;scriptgt;import Child from './Child';export default { data() { return { data: 'I am your father', } }, components: { Child }}lt;/scriptgt;

然后由子组件中的props接收，这样组件就接收到了父组件传递的值。

// Child.vuelt;templategt; lt;div style="border:1px solid black;width:400px; height: 130px;"gt; lt;h3gt;我是子组件lt;/h3gt; lt;buttongt;子组件将值传递给父组件lt;/buttongt; lt;divgt;父组件向子组件传递的值:{{FatherMsg}}lt;/divgt; lt;/divgt;lt;/templategt; lt;scriptgt;export default { data() { return { data: 'I am your children', } }, props: ['FatherMsg']}lt;/scriptgt;

可以看到，父组件与子组件之间的通信已经实现，接下来就是子组件与子组件之间的通信了。这个会用这个。$emit方法。

子组件向父组件通信

实现思路:用这个。$emit在子组件中触发自定义事件并传递值，然后在父组件中侦听事件。

将click事件添加到子组件中的button按钮，以通过此自定义事件。$emit，并传入一个参数:

lt;templategt; lt;div style="border:1px solid black;width:400px; height: 130px;"gt; lt;h3gt;我是子组件lt;/h3gt; lt;button @click="send"gt;子组件将值传递给父组件lt;/buttongt; lt;divgt;父组件向子组件传递的值:{{FatherMsg}}lt;/divgt; lt;/divgt;lt;/templategt; lt;scriptgt;export default { data() { return { data: 'I am your children', } }, props: ['FatherMsg'], methods: { send() { this.$emit('ListenChild', this.data); } }}lt;/scriptgt;

在父组件的子组件标签中，首先在数据中定义一个变量来接收该值，然后监视子组件中定义的事件，并接受对已定义变量的参数赋值:

lt;templategt; lt;div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;"gt; lt;h3gt;我是父组件lt;/h3gt; lt;divgt;子组件向父组件传递的值:{{ChildMsg}}lt;/divgt; lt;Child :FatherMsg="data" @ListenChild="ListenChild"gt;lt;/Childgt; lt;/divgt;lt;/templategt;lt;scriptgt;import Child from './Child';export default { data() { return { data: 'I am your father', ChildMsg: '', } }, components: { Child }, methods: { ListenChild(data) { console.log("子组件传递过来的值：" , data); this.ChildMsg = data; } }}lt;/scriptgt;

单击子组件中的ldquo子组件将值传递给父组件rdquo，您可以看到以下效果:

三、父子组件事件触发

父组件调用子组件中的事件方法

直接通过ref调用子组件的方法:

// Child.vue lt;templategt; lt;div style="border: 1px solid black; width: 150px; margin: 10px auto"gt; 我是子组件 lt;div style="color: red"gt; {{ msg }} lt;/divgt; lt;/divgt;lt;/templategt;lt;scriptgt;export default { data() { return { msg: '', } }, methods: { childFun() { console.log('我是子组件的方法 childFun'); this.msg = '我的方法被调用了' }, },};lt;/scriptgt;

在子组件的标签上添加ref属性，然后通过这个找到方法中绑定ref的属性。$refs调用子组件中的方法。

// Father.vuelt;templategt; lt;div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto"gt; 我是父组件 lt;Button @click="handleClick"gt;点击调用子组件方法lt;/Buttongt; lt;Child ref="child" /gt; lt;/divgt;lt;/templategt; lt;scriptgt;import Child from './Child';export default { components: { Child }, methods: { handleClick() { this.$refs.child.childFun(); }, },}lt;/scriptgt;

通过组件的$emit，$on方法:

// Child.vue lt;templategt; lt;div style="border: 1px solid black; width: 150px; margin: 10px auto"gt; 我是子组件 lt;div style="color: red"gt; {{ msg }} lt;/divgt; lt;/divgt;lt;/templategt;lt;scriptgt;export default { data() { return { msg: '', } }, mounted() { this.$on('childFun', function() { console.log('我是子组件方法'); this.msg = '我的方法被调用了' }); }};lt;/scriptgt;

使用$on在子组件中绑定一个方法，然后通过$emit在父组件中找到绑定的$on上的事件名，但也需要ref的配合。

// Father.vuelt;templategt; lt;div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto"gt; 我是父组件 lt;Button @click="handleClick"gt;点击调用子组件方法lt;/Buttongt; lt;Child ref="child" /gt; lt;/divgt;lt;/templategt; lt;scriptgt;import Child from './Child';export default { components: { Child }, methods: { handleClick() { //子组件$on中的名字 this.$refs.child.$emit("childFun") }, },}lt;/scriptgt;

这两种实现方法具有相同的效果。

在调用方法之前:

调用方法后:

子组件调用父组件中的事件方法

通过此调用父组件的方法。直接子组件中的$parent。

// Father.vuelt;templategt; lt;div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" gt; 我是父组件 lt;Childgt;lt;/Childgt; lt;div style="color: red"gt; {{ msg }} lt;/divgt; lt;/divgt;lt;/templategt;lt;scriptgt; import Child from './Child'; export default { data() { return { msg: '' } }, components: { Child }, methods: { fatherMethod() { console.log('我的父组件中的方法'); this.msg = '我的方法被子组件调用了'; } } };lt;/scriptgt;// Child.vuelt;templategt; lt;div style="border: 1px solid black; width: 150px; margin: 10px auto"gt; 我是子组件 lt;button @click="childMethod"gt;点击调用父组件方法lt;/buttongt; lt;/divgt;lt;/templategt;lt;scriptgt; export default { methods: { childMethod() { this.$parent.fatherMethod(); } } };lt;/scriptgt;

在子组件中使用$emit来触发父组件的事件，父组件监听该事件(推荐)

// Father.vuelt;templategt; lt;div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" gt; 我是父组件 lt;Child @fatherMethod="fatherMethod"gt;lt;/Childgt; lt;div style="color: red"gt; {{ msg }} lt;/divgt; lt;/divgt;lt;/templategt;lt;scriptgt; import Child from './Child'; export default { data() { return { msg: '' } }, components: { Child }, methods: { fatherMethod() { console.log('我的父组件中的方法'); this.msg = '我的方法被子组件调用了'; } } };lt;/scriptgt;

子组件可以使用$emit来触发父组件的自定义事件。

// Child.vuelt;templategt; lt;div style="border: 1px solid black; width: 150px; margin: 10px auto"gt; 我是子组件 lt;button @click="childMethod"gt;点击调用父组件方法lt;/buttongt; lt;/divgt;lt;/templategt;lt;scriptgt; export default { methods: { childMethod() { // fatherMethod父组件方法 this.$emit('fatherMethod'); } } };lt;/scriptgt;

父组件将该方法传递给子组件，并在子组件中直接调用该方法:

// Father.vuelt;templategt; lt;div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" gt; 我是父组件 lt;Child :fatherMethod="fatherMethod"gt;lt;/Childgt; lt;div style="color: red"gt; {{ msg }} lt;/divgt; lt;/divgt;lt;/templategt;lt;scriptgt; import Child from './Child'; export default { data() { return { msg: '' } }, components: { Child }, methods: { fatherMethod() { console.log('我的父组件中的方法'); this.msg = '我的方法被子组件调用了'; } } };lt;/scriptgt;

父组件可以将事件绑定到子组件的标签上，子组件使用props接收父组件的事件。

// Child.vuelt;templategt; lt;div style="border: 1px solid black; width: 150px; margin: 10px auto"gt; 我是子组件 lt;button @click="childMethod"gt;点击调用父组件方法lt;/buttongt; lt;/divgt;lt;/templategt;lt;scriptgt; export default { props: { fatherMethod: { type: Function, default: null } }, methods: { childMethod() { if (this.fatherMethod) { this.fatherMethod(); } } } };lt;/scriptgt;

以上三种实现方式效果相同。

在调用方法之前:

调用方法后:

四、总结

至此，Vue和它的亲子组件之间的大部分操作都已经涉及到了，我们在程序开发的过程中就可以对这部分驾轻就熟了。

关于Vue中亲子组件的通信和事件触发的这篇文章到此为止。关于Vue中亲子组件的通信和事件触发的更多信息