vue父子组件传值：详解父组件向子组件传值（props）

vue父子组件传值：父组件向子组件传值（props）定义父组件2.定义子组件关键点：1.父组件想要向子组件传值，那么需要在子组件引入的地方绑定要传的值，并且要在父组件中引入子组件。2.绑定的值可以是一个自定义属性来存放父组件向子组件传递的数据。3.子组件使用props属性接收，然后可以直接在页面上以这个形式“{{}}”引用1.父组件代码如下：<template><div>父

文章共854字 · 阅读需要大约3分钟

一键AI生成摘要，助你高效阅读

问答

西西贝贝Xx

75015人浏览 · 2020-10-27 14:05:15

西西贝贝Xx · 2020-10-27 14:05:15 发布

vue父子组件传值：父组件向子组件传值用的是props

1.定义父组件

1）父组件想要向子组件传值时，那么需要在子组件引入的地方绑定一个属性，属性值就是要传的数据，并且要在父组件中引入子组件。

2）这个自定义属性的属性值是用来存放父组件向子组件传递的数据。

3）在这里，name即是要传的数据，需要在data定义，所以当传递的数据时字符串类型时，可以在data定义为 name:''

父组件如下：

在这里插入图片描述

2.定义子组件

1）子组件使用props属性接收父组件传递过来的值。

写法是：

 props:{
	父组件自定义的属性：该值的类型，
	required:true
 }

所以在这里是：

 props: {
      inputName: String,
      required: true
    }

2）然后可以直接在页面上以这个形式“{{}}”引用。

子组件如下：

在这里插入图片描述

代码：

1.父组件代码如下：

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

2.子组件代码

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>