vue组件之间通讯

阅读量: 0
Vue
Vue通讯, vue组件

vue作为组件化框架，组件之间的通讯是日常开发中必不可少的；通讯类型有三种：

  1. 父组件->子组件
  2. 子组件->父组件
  3. 同级组件之间

父组件 -> 子组件

废话不多说，直接上代码。

<template>
  <div id='fatherComponent'>
    <children-component :params='params' ></children-component>
  </div>
</template>
<script>
import childrenComponent from './childrenComponent.vue' //子组件的相对路径
export default {
  data(){
    return {
      params:{
        a:1,
        b:2,
        c:3
      },
    }
  },
  .
  .
  .
  components:{
    'children-component':childrenComponent
  }
}
</script>

父组件中的写法大致就是这样， 需要注意的是：

  1. :params='params'在组件上绑定要传给组件的值，可以是数组，字符串，布尔，对象等等类型的值。
  2. import childrenComponent from './childrenComponent.vue'引入子组件
  3. 'children-component':childrenComponent 在components生命周期中声明子组件标签（驼峰命名转化为-代替）。
<template>
  <div id='childrenComponent'>
    <p>我是{{params.a}}</p>
  </div>
</template>
<script>
  export default {
    props:['params'],
    data(){

    },

    mounted(){
      console.log(this.params)
    }

  }
</script>

子组件中需要注意的是：

  1. props:['params'] 在子组件中要用props来接受父组件传来的值。并且要与父组件绑定的变量名一致。
  2. <p>我是</p> 在DOM中可以直接用这个变量来取值。

子组件 -> 父组件

<template>
  <div id='fatherComponent'>
    <children-component :params='params' @getChildrenData='childrenData' ></children-component>
  </div>
</template>
<script>
import childrenComponent from './childrenComponent.vue' //子组件的相对路径
export default {
  data(){
    return {
      params:{
        a:1,
        b:2,
        c:3
      },
    }
  },

  methods:{
    childrenData(_val){
      console.log(_val)
    }
  },
  .
  .
  .
  components:{
    'children-component':childrenComponent
  }
}
</script>
  1. @getChildrenData='childrenData' 声明一个函数（getChildrenData）来监听子组件emit来的getChildrenData函数。
<template>
  <div id='childrenComponent'>
    <p>我是{{params.a}}</p>
    <button @click='toFather'></button>
  </div>
</template>
<script>
  export default {
    props:['params'],
    data(){
      msg:'我收到啦！'
    },

    mounted(){
      console.log(this.params)
    },

    methods:{
      toFather(){
        this.$emit('getChildrenData',this.msg)
      }
    }

  }
</script>
  1. this.$emit('getChildrenData',this.msg) 子组件使用$emit函数会向父组件以参数的形式来传递数据。

    同级组件之间通讯之间

    在我的理解来看，既然是同级组件，那必然有一个相同的父组件，所以也是可以用emit函数来通讯，只不过监听emit过来的函数的是同级组件而已。所以这里不做过多的解释了。
    接下来说说，一个父组件中引用了多个子组件，如何来调用多个子组件中的方法呢。

父组件调用多个子组件中的方法

<template>
  <div id='childrenComponent'>
    <el-tabs v-model="activeName">
      <el-tab-pane label="组件1" name="components1">
          <children-component1 :params='params' ref="components1"></children-component1>
      </el-tab-pane>

      <el-tab-pane label="组件2" name="components2">
          <children-component2 :params='params' ref="components2"></children-component2>
      </el-tab-pane>

      <el-tab-pane label="组件3" name="components3">
          <children-component3 :params='params' ref="components3"></children-component3>
      </el-tab-pane>
    </el-tabs>
    <button @click='goChildren'></button>
  </div>
</template>
<script>
import childrenComponent1 from './childrenComponent1.vue' //子组件的相对路径
import childrenComponent2 from './childrenComponent2.vue' //子组件的相对路径
import childrenComponent3 from './childrenComponent3.vue' //子组件的相对路径

  export default {
    data(){
      activeName:'freeLearnTotal',
    },

    methods:{
      goChildren(){
        this.$refs.components2.要调用方法名()
      }
    },

    components:{
      'children-component1':childrenComponent1,
      'children-component2':childrenComponent2,
      'children-component3':childrenComponent3
    }

  }
</script>
  1. ref="components2"核心就是这个。this.$refs是所有组件的合集。
来必力
Valine