1.父向子组件传参

App.vue为父，引入componetA组件之后，则可以在App.vue中使用标签（注意驼峰写法要改成componet-a写法，因为html对大小写不敏感，componenta与componentA对于它来说是一样的，不好区分，所以使用小写-小写这种写法）。

而子组件componetA中，声明props参数’msgfromfa’之后，就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>标签中。

App.vue中

<component-a msgfromfa="( 不积跬步,无以至千里;不积小流,无以成江海)"></component-a>

 

import componentA from './components/componentA' export default { new Vue({ components: { componentA } }) }

 

componentA.vue中

<p>{{ msgfromfa }}</p> export default { props: ['msgfromfa'] }

2.子组件向父传参

2.1  .$emit

用法：vm.$emit( event, […args] )，触发当前实例上的事件。附加参数都会传给监听器回调。 例子：

App.vue中component-a绑定了自定义事件”child-say”。

子组件componentA中，单击按钮后触发”child-say”事件，并传参msg给父组件。父组件中listenToMyBoy方法把msg赋值给childWords，显示在<p>标签中。 App.vue中

<p>Do you like me? {{childWords}}</p> <component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>

 

import componentA from './components/componentA' export default { new Vue({ data: function () { return { childWords: "" } }, components: { componentA }, methods: { listenToMyBoy: function (msg){ this.childWords = msg } } }) }

 

componentA.vue中

<button v-on:click="onClickMe">like!</button>

 

import componentA from './components/componentA' export default { data: function () { return { msg: 'I like you!' } }, methods: { onClickMe: function(){ this.$emit('child-say',this.msg); } } }

 

2.2  .$dispatch

用法：vm.$dispatch( event, […args] )，派发事件，首先在实例上触发它，然后沿着父链向上冒泡在触发一个监听器后停止。 例子：App.vue中events中注册”child-say”事件。子组件componentA中，单击按钮后触发”child-say”事件，并传参msg给父组件。父组件中”child-say”方法把msg赋值给childWords，显示在<p>标签中。

App.vue中

<p>Do you like me? {{childWords}}</p> <component-a msgfromfa="(Just Say U Love Me)"></component-a>

 

import componentA from './components/componentA' export default { new Vue({ events: { 'child-say' : function(msg){ this.childWords = msg } } }) }

 

componentA.vue中

<button v-on:click="onClickMe">like!</button>

 

import componentA from './components/componentA' export default { data: function () { return { msg: 'I like you!' } }, methods: { onClickMe: function(){ this.$dispatch('child-say',this.msg); } } }

 

 原文：https://www.cnblogs.com/yujihang/p/6838283.html

、、、、、、、、、、、、、、、、、、、、、、、、、

vue中父组件调用子组件函数

用法： 子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法

详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即  this.$refs.refName.

然后再进行调用，也就是 this.$refs.refName.method

如下：

子组件：

 

<template> <div> childComponent </div> </template> <script> export default { name: "child", methods: { childClick(e) { console.log(e) } } } </script>

 

父组件：

 

<template> <div> <button @click="parentClick">点击</button> <Child ref="mychild" /> //使用组件标签 </div> </template> <script> import Child from './child'; //引入子组件Child export default { name: "parent", components: { Child // 将组件隐射为标签 }, methods: { parentClick() { this.$refs.mychild.childClick("我是子组件里面的方法哦"); // 调用子组件的方法childClick } } } </script>

 

 原文：https://www.cnblogs.com/renzm0318/p/8762129.html

 

Vue子组件调用父组件的方法

1.先在父组件设置监听v-on

<router-view v-on:router-view="listenToMyBoy" />  //listenToMyBoy为父组件的方法

2.子组件触发监听router-view

this.$emit('router-view', item)  //item是父组件listenToMyBoy方法的参数

3.注意的是监听一定要放在 调用子组件的模块。

原文：https://blog.csdn.net/wpj130/article/details/70318073