父组件
<template>
<div id="container">
<!-- 3. 使用子组件并利用 v-model 往子组件中进行传参 -->
<Child :msg="data"></Child>
</div>
</template>
<script>
// 1. 导入子组件
import Child from '@/components/Child'
export default {
// 数据
data () {
return {
data: '父组件的值'
}
},
// 方法
methods: {
},
// 组件
components: {
// 2. 注册子组件
Child
}
}
</script>
子组件
<template>
<div id="container">
<!-- 2. 渲染出父组件中传过来的值 -->
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
// 方法
data () {
return {}
},
// 1. 接收父组件传过来的参数
props: ['msg']
}
</script>