this.$refs.引用名.子组件的某个方法
this.$children[0].子组件的某个方法（不推荐）
第一种方法步骤：
1、父组件通过属性将值传递给子组件
<cpn :msg="message"></cpn>components: { cpn: { template: "#tmp", props: ["msg"], data() { return { counter: 0, } }, }, }
总结：
子组件中默认无法访问到父组件中的data上的数据和methods中的方法
父组件可以在引用子组件的时候，通过属性绑定(v-bind:)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
子组件中把父组件传递过来的parentMsg属性，先在props数组中定义一下，这样才能使用这个数据
如果父组件传递过来的属性带-,则在props中定义的时候需要使用驼峰命名，否则直接写传递过来的属性名即可
组件中的所有props中的数据，都是通过父组件传递给子组件的
1、在使用子组件时，给子组件加一个ref引用
2、父组件通过this.$refs即可找到该子组件，也可以操作子组件的方法：
this.$refs.ref引用.子组件方法
3、在子组件init方法中即可接收父组件传递过来的数据了
注意：ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
<add-person ref="AddUser"></add-person>this.$nextTick(() => { this.$refs.AddUser.init(row)})
通过$children,可以获取到所有子组件的集合
this.$children[0].某个方法
$emit
$root
$parent（不推荐）
子组件又是如何向父组件传递数据的呢：通过事件向父组件发送消息
第一种方法步骤：
1、子组件通过自定义事件向父组件传递信息，在子组件中，通过$emit()来触发事件。
父组件向子组件传递方法，使用的是事件绑定机制,v-on 当自定义了一个事件属性之后，那么子组件就能够通过某些方式（this.$emit）来调用传递进去的这个方法了
可以通过this.$emit('绑定在子组件身上的事件名称',参数一，参数二)
第二种方法：子组件调用父组件方法以及获取父组件的值
1、通过 $root可以找到根组件
2、通过 $parent可以找到父组件
十、非父子组件间传值
在vue项目中，父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯，就会比较麻烦。这时，使用eventBus通讯，就可以很便捷的解决这个问题。
eventBus可以在全局定义，实现全项目通讯，使用方法也很简单。
1、初始化——全局定义
//main.jsimport Vue from 'vue';//方式一Vue.prototype.$EventBus = new Vue();//方式二window.eventBus = new Vue();
//使用方式一定义时this.$EventBus.$emit('eventName', param1,param2,...)//使用方式二定义时EventBus.$emit('eventName', param1,param2,...)
//使用方式一定义时this.$EventBus.$on('eventName', (param1,param2,...)=>{ //需要执行的代码})//使用方式二定义时EventBus.$on('eventName', (param1,param2,...)=>{ //需要执行的代码})
//使用方式一定义时this.$EventBus.$off('eventName');//使用方式二定义时EventBus.$off('eventName');
import Vue from 'vue'// 使用 Event Busconst bus = new Vue()export default bus
// 在需要用到的组件中引入import bus from '@/utils/bus'// 监听mounted(){ bus.$on('changeActive', (next, apiId, serviceId) => { this.updateActive(next, apiId, serviceId) }) } methods: { updateActive (next, apiId, serviceId) { this.apiId = apiId this.serviceId = serviceId if (next) { // 点击下一步，数据全部清空 this.active += 1 } else { this.active -= 1 } },}
bus.$emit('changeActive', true, this.apiId, this.serviceType)
本文地址：软件教程频道 https://www.eeeoo.cn/ruanjian/903499_3.html，嗨游网一个专业手游免费下载攻略知识分享平台，本站部分内容来自网络分享，不对内容负责，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
