美文网首页
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:'',

    }

  },

相关文章

  • Vue_组件间传值

    1、父组件传值给子组件2、子组件传值给父组件 1、父组件传值给子组件 2、子组件传值给父组件

  • React 父子组件通信

    父子组件通信分为【父组件给子组件传值】、【父组件获取子组件的值】两类。 一.父组件给子组件传值3种方式 1.父组件...

  • vue2.0 父子组件传值

    父组件传值给子组件 子组件 子组件通过 props 接收值 父组件 父组件通过标签属性传值 子组件传值给父组件 子...

  • angular组件之间的传值

    父子组件传值 父组件给子组件传值通过属性绑定的方式 子组件通过发送是事件给父组件传值 兄弟组件相互传值 兄弟组件通...

  • 第10节 React propTypes defaultPr

    一、父组件给子组件传值 1.1 defaultProps 父子组件传值中,如果父组件调用子组件的时候不给子组件传值...

  • react子组件、父组件相互传值

    子组件传图片路径imgUrl值给父组件,父组件传imgaddr值给子组件子组件: 父组件:

  • 父子组件通信

    父级给子组件传值: 在父级中调用组件 在子组件js中获取 子组件给父级传值 在子组件中 父级 html 父级js

  • Vue组件传值

    vue组件传值 一、父组件向子组件传值方式: 1. 子组件中定义props,父组件向子组件props进行传值。 2...

  • Vue父子组件之间的传值

    1、父组件向子组件传值 父组件中 子组件中 2、子组件向父组件传值 子组件中 父组件中

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

网友评论

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

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