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

2019-08-08  本文已影响0人  qiaoguoxing

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:'',

    }

  },

上一篇下一篇

猜你喜欢

热点阅读