vue 常用的父子组件通信

组件通讯包括：父子组件间的通信和兄弟组件间的通信。在组件化系统构建中，组件间通信必不可少的。

父组件--> 子组件

父组件关键代码如下：

<template>
    <Child :childMsg="allProjectIdAndName"></Child>
</template>

<script>
    export default{
    name: 'father',
    data () {
      return {
        allProjectIdAndName: []
      }
    }
</script>

子组件关键代码如下：

export default {
  name: 'child',
  props: {
    allProjectIdAndName
  }
};

childMsg为父组件给子组件设置的额外属性值，属性值需在子组件中设置props，子组件中可直接使用childMsg变量。

子组件--> 父组件

1.发送事件/监听事件

子组件中某函数内发送事件：

<template>
  <div>
    <button @click='seeProject'>发送</button>
  </div>
</template>

<script>
    export default {
    name: 'child',
    data() {
        return {
            id: ''
        }
    },
    methods: {
      seeProject: function() {
        this.$emit('ProjectIdName', this.id);
      }
    }
  }
</script>

父组件监听事件：

<template>
  <div>
      <ListOfProjectNames @ProjectIdName="showID"></ListOfProjectNames>
  </div>
</template>

<script>
  import ListOfProjectNames from '@/components/ListOfProjectNames';
  export default{
    name: 'father',
    methods: {
      // 展现iD
      showID: function(id) {
        console.log(id);
      }
    },
    components: {
      ListOfProjectNames
    }
  }
</script>

2. 父组件直接获取子组件属性或方法

给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值

<!-- 子组件。 ref的值是组件引用的名称 -->
<child-component ref="aName"></child-component>

父组件中通过 $refs.组件名来获得子组件，也就可以调用子组件的属性和方法了。

var child = this.$refs.aName
可以直接获取属性和方法

vue 常用的父子组件通信

父组件--> 子组件

子组件--> 父组件

猜你喜欢