vue几种组件传值

1. 父子组件通信

（1）怎么定义是父子组件？

第一种：将其他组件以import引入用自定义标签接收，在当前组件中component里注册该标签，页面上可以直接用<自定义标签></自定义标签>样子使用。当前组件为父组件，被引入的组件为子组件。

import aa from './children/aa.vue'

components:{
    aa
}

<aa></aa>

第二种：在路由中定义好组件，组件中含有children，页面上通过<router-view></router-view>形式使用，也算是父子组件，当前组件为父组件，router-view路由的为子组件。

routes: [
    {
      path: '/',
      name:index,     
      component: index,
      children: [
        {
          path: 'aa',
          name: 'AA',
          component: AA
        }
      ]
    }
]

<router-view></router-view>

（2）父组件的数据、方法传递给子组件
方式1：

在父组件里面，子组件以自定义标签，或者router-view的形式调用，在这些标签里通过:lists=’list’，:alert1=’alert1’，形式传递给子组件。:后面跟的是自己定义的参数名，后面子组件接收时用到。’’里面跟的是父组件里的数据，或者方法。

子组件中，用props:[‘lists’,’alert1’],形式接收父组件的数据和方法，注意接收使用的名字跟父组件自己定义的名字要一致，此时如果接收的方法用到了父组件的变量，在子组件中调用时，还是指向父组件的变量。

父组件中的数据和方法

list:[
    {title:'父传子',main:'父组件数据给子组件'}
]

methods:{
    //父组件方法
    btn(){
        console.log(this.aa)
    }
}

在子组件自定义标签中声明传递的数据和方法

<aa :list="list" :btn="btn"></aa>

<router-view :list="list" :btn="btn"></router-view>

子组件props中接收传入的数据和方法。

props:['list','btn']

调用父组件的数据和方法

<h1>{{list[0].titel}}</h1>

<button @click="btn">调用父组件方法</button>