形容
父子组件能够利用 props 间接传值,在子组件中定义 props,并可规定传值类型,当父组件应用子组件时传入相应参数,即可把父组件的数值传递到子组件中。
父组件 Father.vue
<template>
<div id="app">
{{msg}}
<last-children :msgchange='msgdata'></last-children>
</div>
</template>
<script>
import LastChildren from './components/lastChildren.vue'
export default {
components:{LastChildren},
data () {
return {
msg: '你好 vue',
msgdata: '我是父组件传值'
}
}
}
</script>
子组件 lastChildren.vue
<template>
<div>
{{msg}}
<span>{{msgchange}}</span>
</div>
</template>
<script>
export default{
name: 'last-children',
data(){
return {msg: '我是一个 home 组件'}
},
props:{
msgchange: {type: String}
}
}
</script>