zoukankan      html  css  js  c++  java
  • 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是子传过来的属性名

  • 相关阅读:
    js实现弹窗后选择信息填入text标签中以及需要注意的问题
    JDBC链接mysql之后出现read-only
    面试题之心理测试题及答案
    互联网经济思维故事
    模板
    工具包、类
    开源项目
    项目开发工具
    Java API 常用 详解
    spring文章
  • 原文地址:https://www.cnblogs.com/douzizuikeai/p/10585677.html
Copyright © 2011-2022 走看看