美文网首页
2019-08-08 父组件给子组件传值的集中方式(持续更新中)

2019-08-08 父组件给子组件传值的集中方式(持续更新中)

作者: qiaoguoxing | 来源:发表于2019-08-08 10:49 被阅读0次

    1.this.$parent方式,但是尽量不要用

    指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。注意,这个this.children是一个数组。

    2.通过props的方式(最常用的方式)

    在子组件中定义

    props:{

        secondname:{

          type:String,

     // 定义该 prop 是否是必填项。在非生产环境中,如果这个值为 truthy 且该 prop 没有被传入的,则一个控制台警告将会被抛出。

          required:false,

          default:'laowang'

        }

      },

    在子组件中使用这个props

    <template>

      <div class="out-container">

      <input type="text" :value='secondname'>

      </div>

    </template>

    在父组件中传递参数

    <children-son :secondname='lllName'></children-son>

    data(){

    return{

            lllName:'leilaohu'

             }

    }

    3.通过provide / inject可以把父组件的消息传递给左右的后代元素

    provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

    provide和inject使用场景也是组件传值,尤其是祖父组件--孙组件等有跨度的组件间传值,单向传值(由provide的组件传递给inject的组件)。

    父组件中

    components:{childrenSon},

      provide(){

        return{

          elForm:this

        }

      },

      data () {

        return {

          message:0,

          message1:'zhangsan',

          person:{name:'乔大帅'},

          firstName:'qiao',

          lllName:'leilaohu',

        }

      },

    子组件中

    <input type="text" :value='elForm.message1'>

    name:'childrenSon',

      inject: ['elForm'],

      data(){

        return{

          name:'xiaobai',

          age:10,

          Name:'',

        }

      },

    相关文章

      网友评论

          本文标题:2019-08-08 父组件给子组件传值的集中方式(持续更新中)

          本文链接:https://www.haomeiwen.com/subject/lcbtjctx.html