父组件

<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>