Vue中的父子组件通信和事件触发_数据库
组件是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中亲子组件的通信和事件触发的更多信息
相关文章
- 悟空定制版显卡现身!它能驾驭黑神话中的黑暗世界吗?
- Anaconda对英特尔发起版权诉讼,指控其未经许可使用AI工具! 近期,软件开发商Anaconda向科技巨头英特尔发起了一场版权风波。Anaconda指控英特尔在许可证到期后,仍继续使用其软件来开
- 七彩虹将星x17AT怎么样?七彩虹(Colorful)将星 X17-AT:游戏本中的性能猛兽
- vivoy78怎么样值得买吗?vivo Y78:千元机中的全能选手
- 解决PS在Win11汉化中的Bug:原因分析与专业修复方法
- 荣耀MagicBook Pro 16 HUNTER版:轻薄本中的性能猛兽
- 如何使用PowerPoint2013中的复制动画功能?
- 隐藏PowerPoint中的声音图标
- PowerPoint 2010替换演示文稿中的图片
- discuz教程:电脑版、手机版去除标题title中的Powered by Discuz