VUE组件传值方法大全

组件（Component）是 Vue.js 最强大的功能之一。它可以扩展 HTML 元素，封装可重用的代码。。因此，学习vue首先要对组件传值做到灵活运用，笔者在此总结一下常见的组件传值的方法，以供查阅。
首先明确几个概念

组件：组件使我们能够将复杂的应用程序分解成小块。例如，典型的Web应用程序将具有标题，侧边栏，内容和页脚等部分。

组件间的关系：vue组件中的关系只分为两种
1.父子关系（如图中App组件和one组件。App组件和Two组件）
2.非父子关系（除直接父子关系外，都是非父子关系）

clipboard.png

明确了这几个关系后，我们还需要了解的一点是：vue组件间的数据流动是单向的。在此基础上我们将对组件传值的语法进行总结

一、父传子

方式1：

传递：当子组件在父组件中当做标签使用的给，给子组件绑定一个自定义属性，值为需要传递的数据

接收:在子组件内部通过props进行接收,props接收的方式有2种方式
1、通过数组进行接收 props:["属性"]

(常用)2、通过对象的方式进行接收:props:{
                    属性:{
                        1、type:限制数据的类型
                        2、default:"默认值"
                        3、required:必须传递
                    }
                }

父组件

    <mycomponent my-message="我是父组件传递的值"></mycomponent>
</div>

子组件

Vue.component('mycomponent',{
    template: '<div>这是一个自定义子组件,父组件传给我的内容是：{{myMessage}}</div>',
    props: ['myMessage'],
    data () {
      return {
        message: 'hello world'
      }
    }
  })

方式2：

provide / inject：可以实现跨组件传值数据的流向只能是向下传递

provide:这个配置项必须要在父级进行使用，用来定义后代组件所需要的一些属性和方法

    语法：
          provide(){
                return {
             }
        }

        provide:{

          }

inject:这个配置项必须在后代组件中进行使用，用来获取根组件定义的跨组件传值的数据

                inject:[]
                inject:{
                    key:{
                        from:"父组件的名称",
                        default:"默认值"
                    }
                }

二、子传父

方法1

1、(接收)当子组件在父组件中当做标签使用的时候给当前子组件绑定一个自定义事件，值为需要接收值得函数，这个函数要特别的注意不允许加()

2、(传递的过程)在子组件内部通过this.$emit("自定义事件的名称",需要传递的参数)来进行数据的传递
子组件发送数据

image.png

父组件接收数据

image.png

方法2

   插槽作用域: 本方法将在下一篇VUE插槽的文章中详解

三、非父子传值

方法1

1、通过给Vue的原型上添加一个公共的Vue实例对象(因为Vue实例对象身上有$on和 $emit),需要传递的一方调用$eimt 需要接收值得一方调用$on
observer封装如下

const eventList = {}

const $on = function(eventName,callback){
    if(!eventList[eventName]){
        eventList[eventName] = [];
    }

    eventList[eventName].push(callback);
}

const $emit = function(eventName,params){
    if(eventList[eventName]){
        var arr = eventList[eventName];
        arr.forEach((cb)=>{
            cb(params)
        })
    }
}

const $off = function(eventName,callback){
    if(eventList[eventName]){
        if(callback){
            var index = eventList[eventName].indexOf(callback);
            eventList[eventName].splice(index,1);
        }else{
            eventList[eventName].length = 0;
        }
    }
}


export default {
    $on,
    $emit,
    $off
}

main.js文件中

Vue.prototype.$observer = new Vue();

new Vue({
   render:h=>h(App)
}).$mount("#app")

传值

 this.$observer.$emit("handle","我是Three组件")

接收值

this.$observer.$on("handle",(value)=>{
            this.value = value;
        })

方法2

手动事件订阅的方式

方法3

vuex（待更）

最后编辑于：2020.02.15 20:20:54