vue.js组件传值

  组件传值有一下几种方式:父子传值(父传子,子传父),非父子传值,vuex,插槽作用域

  1.父子传值

    (1)父传子:

      传值方:当子元素在父元素中当标签使用时,通过给子标签绑定一个自定义属性,属性值为需要传递的数据

      接收方:在子组件内部通过props接收,props是vm的属性。就收方式有两种:

          1,数组接收props:["值"]

          2,对象接收props:{

              "值":值的类型(string,num。。。。。)

            }

      通常使用对象接收,因为可以检验数据类型

    (2)子传父:

      传值方:当子组件给父组件传数据时,通过调用父组件给父组件中子标签绑定的自定义事件将值传过去(通过事件订阅,emit("事件名",参数))

      接收方:父组件通过自定义事件的方法的函数接收子组件传过来的数据,注意,这个自定义方法的函数在绑定时不能加(),否则会报错

  2.非父子传值:

    非父子传值通过事件订阅,由于每个组件中的this指向都不同,所以要在Vue的原型上添加一个公共的Vue实例,组件之间通过调用公共Vue实例的on/emit(事件订阅方法)来传值。

    传值方:调用emit,第一个参数是接收方定义的方法名,第二个参数是要传递的值

    接收方:调用on,绑定一个方法,来接收值

  3.vuex:

    vuex是公共状态管理工具,里面存储了组件公用的数据,组件都可以直接从vuex中拿数据,使用数据,但是vuex数据流动遵循了一个数据流,只能单向流动,避免出现错误无法捕获的现象

  4.插槽作用域

    组件标签内包裹的元素默认是不会显示的,若要现实,就要用插槽<slot></slot>,在组件内部通过slot接收,就可以显示了,slot默认接收所有内容,除非具名,具名插槽就是带名字的插槽,组件标签内的元素加上slot属性,就是一个具名插槽了,在组件内部通过slot接收时通过name属性来接受指定元素

  组件标签内的元素:<p slot="aaa"></p>

  组件内部接收:<slot name="aaa"></slot>

    插槽作用域:当前组件不希望由外部控制自己的数据时用插槽作用域

    将子组件的数据传递给父组件,只要给组件内部slot绑定自定义属性,在父组件中子标签内部书写template标签,通过scope属性接收子传递过来的数据,数据是对象类型,key是子传过来的属性名

原文地址:https://www.cnblogs.com/douzizuikeai/p/10585677.html