父组件:
<template>
<div class="app">
<child :date="msg"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
data () {
return {
msg: "this is msg"
}
},
components:{
child,
}
}
</script>
步骤1:引入子组件
import child form './child.vue'
步骤2:添加到父组件的components中
components:{
child,
}
步骤3:将需要传的数据绑定到子组件中
<child :date="msg"></child>
这里的date是随便取的变量名,后面子组件中需要使用。msg是父组件传递给子组件的数据(data中的数据)
子组件:
<template>
<div class="app">
<li >{{date}}</li>
</div>
</template>
<script>
export default {
props:['date'],
data () {
return {
}
}
}
</script>
步骤1:使用props获取父组件的数据
props:['date']
这里的date是父组件中绑定的变量名,要跟父组件一样。
引入之后子组件就拥有了date这个变量了,不需要在data中再次声明了,可以直接使用
步骤2:直接就可以使用date
<template>
<div class="app">
<li >{{date}}</li>
</div>
</template>
好了,ok!
总结:父组件通过属性绑定,将需要传递的值通过属性绑定到使用的子组件上。子组件通过props接收父组件绑定的属性。