大家好，又见面了，我是你们的朋友全栈君。
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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/135092.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
