提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Vue组件 详解 传值 父子 Props 向子
2023-06-13 09:12:01 时间

大家好，又见面了，我是你们的朋友全栈君。

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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/135092.html原文链接：https://javaforall.cn

相关文章