父传子

1.在父组件import子组件

2.挂载

3.在占位符中v-bind传入数据

4.子组件export default中props引入值

<!-- 简单数据类型message传值时复制的是对象，复杂数据类型userinfo引用的是数据地址 -->

父App.vue

<template>
    <div>
      <!-- 简单数据类型message传值时复制的是对象，复杂数据类型userinfo引用的是数据地址 -->
      <props :msg="message" :user="userinfo"></props>
    </div>
</template>
<script>
import props from './views/prop.vue'
export default {
   data() {
      return {
        message:'Hello cfy',
        userinfo:{name:'xj',age:18}
      }
   },
​
components:{
  props
},
​
</script>
​
​

子prop.vue

<template>
    <div>
        <h3>Props传值组件</h3>
        <p>msg的值{{msg}}</p>
        <p>user的值{{user}}</p>
    </div>
</template>
<script>
export default {
    props:['msg','user'],
   data() {
      return {
      }
   },
</script>