vue使用組件（父子组件之间的使用，子传父，父传子）【超详细简单】

组件之间的相互传值，话不多说，开整

首先是我们在components下面创建一个组件new.vue,这是我们的子组件

1，注册组件和调用

然后我们在main.js里去注册这个组件

 

import news from 'components/new.vue'
Vue.component('news',news)//子组件注册
Vue.use(news)
Vue.component('news',news)

注册完之后我们就可以去pages目录下的任意页面进行调用

这是打印效果

以上就是注册调用组件，下面跟大家说说怎么去用父组件给子组件传值

首先我们在组件上直接给参数就行像这样

2，父组件给子组件传递参数

然后再到子页面去接受数据，接受数据的时候我们用props,里面写我们在组件上给的参数就行，像这样

下面是效果图

 

这样我得数据就从父页面传递过来了，非常简单，除了传递参数之外我们还可以父页面调用子页面的方法

 3，父页面调用子页面的方法

 首先我们在子页面写一个方法news

 然后我们回到父页面，用ref来控制调用子组件的方法

 

下面是打印效果

 

是不是非常的简单

4，子组件调用父组件的方法 

首先我们在父组件里随便定义一个方法,记得要在组件是写好方法名，不然不可以的，给你们画红圈的地方都要看一下

 

然后回到子组件里去掉用 我们在子组件使$emit去调用父组件的方法，这里注意方法名要写对哈不然调用不了

下面我们来看一下打印效果 

这样就调用到父组件的方法啦，是不是非常简单，不定时更新哦，欢迎留言，一起进步！！！