VUE组件传值的几种方式

一、组件传值有几种类型呢？

• 父组件给子组件传值
• 子组件给父组件传值
• 非父子组件的传值

二、下面具体说说有哪几种传递方式   （详情也可查看官网内容）

    1、一类是公用的传值方式：

• 通过缓存传值
• 通过插件vuex
• 通过程序应用的全局变量的挂载，将变量挂载在vue的原型()上（类似bus模式）
• 通过网络请求，服务器间进行传值（如果是非任务操作，一般不用。消耗资源）

    2、一类是限制特定的传递方式

•  父组件传值给子组件

  可以根据非props的Attribute进行传值。（值只能传递到最外围的根组件）该方法是使用了attribute的继承方式。子组件使用$attrs获取到对应的值

  使用作用域插槽进行传值

 

 

//父组件绑定动态变量
<v-header :title="title"></v-header>
子组件使用props进行接收
props:['title']

• 子组件传值给父组件 

   

//子组件通过方法向外触发函数
<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }
}
</script>


//父组件进行绑定对应的函数名，从而获得值
<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}
</script>

• 非父组件间的传值

     vue3的新特性Provide / Inject  这里不多说详情看官网文档：https://v3.cn.vuejs.org/guide/composition-api-provide-inject.html