VUE3.X组件之间的传值

一、父子组件传值

子向父传值的双向绑定：父组件使用v-model，子组件使用update:属性名

 

二、Vue3.x父组件主动获取子组件的数据和执行子组件方法

2.1、调用子组件的时候定义一个ref

   <v-header ref="header"></v-header>

2.2、父组件主动获取子组件数据

this.$refs.header.属性

2.3、父组件主动执行子组件方法

this.$refs.header.方法

三、子组件主动获取父组件的数据和执行父组件方法

3.1、子组件主动获取父组件的数据

 this.$parent.数据

3.3、子组件主动获取父组件的方法

this.$parent.方法

四、非父子组件的传值 

 4.0  使用mitt之前先安装mitt模块

 npm install --save mitt

4.1、新建model/event.js

import mitt from 'mitt'
const VueEvent = mitt();
​
export default VueEvent;

4.2、组件1

<template>

    <div class="">

      <h1>数据发送----{{num}}</h1>

      <button @click="add">++</button>

    </div>

</template>

<script type="text/ecmascript-6">

  import VueEvent from '@/model/events';

export default {

    data () {

        return {

          num:0

        }

    },

    methods: {

     add(){

      VueEvent.emit('numChange',this.num+1)

      this.num+=1

     }

    },

}

</script>

4.3、组件2

<template>

    <div class="">

      <h1>数据接收----{{count}}</h1>

    </div>

</template>

<script type="text/ecmascript-6">

  import VueEvent from '@/model/events';

export default {

    data () {

        return {

          count:0

        }

    },

    created() {

      VueEvent.on('numChange',(val)=>{

        this.count = val

      })

    },

}

</script>