详解vue父子组件间传值(props)
时间：2021-01-28 10:27:14|栏目：vue|点击： 次
先定义一个子组件，在组件中注册props
<template>
<div>
<div>{{message}}(子组件)</div>
</div>
</template>
<script>
export default {
props: {
message: String //定义传值的类型<br> }
}
</script>
<style>
</style>
在父组件中，引入子组件，并传入子组件内需要的值
<template>
<div>
<div>父组件</div>
<child :message="parentMsg"></child>
</div>
</template>
<script>
import child from './child' //引入child组件
export default {
data() {
return {
parentMsg: 'a message from parent' //在data中定义需要传入的值
}
},
components: {
child
}
}
</script>
<style>
</style>
这种方式只能由父向子传递，子组件不能更新父组件内的data
上一篇：详解vue中点击空白处隐藏div的实现（用指令实现）
栏 目：vue
本文标题：详解vue父子组件间传值(props)
本文地址：http://www.codeinn.net/misctech/52954.html
