在vue-cli中如何实现父组件传值给子组件呢?
用一个小例子演示给大家:
一、创建一个vue-cli项目
二、创建一个父组件和一个子组件
三、编写子组件、父组件代码
1、子组件代码:
<template>
<div class="comp-son">
<h3>这是子组件</h3>
<h4>接收父组件传过来的值:{{sendToSon}}</h4>
</div>
</template>
<script>
export default {
name:"comp-son",
data(){
return{}
},
props:['sendToSon']
}
</script>
2、父组件代码:
<template>
<div class="father-container">
<comp-son :sendToSon=sendValue></comp-son>
</div>
</template>
<script>
import compSon from "@/components/comp-son.vue";
export default {
name:"father",
data(){
return {
sendValue:"Hello,我是你的爸爸"
}
},
components:{
compSon
}
}
</script>
运行起来:
好啦,以上就是父组件传值给子组件的实现过程,有什么疑问的可以在下方留言哦