VUE实现父子组件传值以及递归组件的传值

父组件给子组件传值

父组件通过 :xxx="xxx" 绑定要传的值

src\views\components\Header.vue

<template> <div id="header"> <engineer :viewer="viewer"></engineer> </div> </template> <script> import Engineer from "./HeaderMenu/Engineer" export default { name:"Header", components:{ Engineer } } </script> 

子组件通过props接收父组件传过来的值

src\views\components\HeaderMenu\Engineer.vue

<template> <div id="engineer"> <div class="operation"> <div><i class="el-icon-folder-add"></i><p>新建</p></div> </div> </div> </template> <script> export default { name:"Engineer", props: { viewer: { type: Object, default () { return {};//Props with type Object/Array must use a factory function to return the default value. } } }, } </script> 

子组件给父组件传值

子组件通过this.$emit发送要传递的值

<template> <div id="engineer"> <div class="operation"> <div @click="iconConfig("flag")"><i class="el-icon-folder-add"></i><p>新建</p></div> </div> </div> </template> <script> export default { name:"Engineer", props: { viewer: { type: Object, default () { return {};//Props with type Object/Array must use a factory function to return the default value. } } }, methods:{ iconConfig(data){ this.$emit('model',data); console.log(data,"data.label.name") } } } </script> 

父组件

<template> <div id="header"> <engineer :viewer="viewer" @model="getModel"></engineer> </div> </template> <script> import Engineer from "./HeaderMenu/Engineer" export default { name:"Header", components:{ Engineer }, methods:{ getModel(data){ console.log('value', data) }, } } </script> 

注意：递归组件向外传递数据直接用$emit是无法实现的。

解决方法：

1方法1：:用provide,inject方法实现。这种实现方法是实现爷爷组件和孙子组件通信的常用方法之一。但是逻辑上，爷爷组件和孙子组件之间是有耦合关系。如果组件封装需要尽量实现解耦，这种方式是有缺点的。

2.方法2：用eventBus实现：这种方法用在兄弟组件之间通信很常见。当然也可以用在爷爷组件和孙子组件之间的传递数据。

用这种方法实际上是用一个中介来传递数据，可以实现递归组件和使用它的组件之间的解耦。

来创建出我们的eventBus，我们把它命名为bus.js：

import Vue from 'vue'; export default new Vue(); 

在递归组件和使用它的组件同时引入：

import Bus from 'common/js/bus.js'; 

在递归组件里面触发事件：

methods: { addCart(event) { Bus.$emit('getTarget', event.target); } } 

在使用递归组件的父组件里面监听事件： 

created() { Bus.$on('getTarget', target => { console.log(target); }); } 

方法3：使用vuex方法，这种方法不加说明，肯定是可以实现的。缺点是：如果小项目，只是个别组件需要多级传递数据，引入vuex方法显然有点多余。

vue 中父子组件传值：props和$emit

vue中父子组件传值问题 通过props 和 $emit()方法

vue父子组件props传值，如何在子组件method里拿到父组件数据

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11282.html