5.通过 Prop 向子组件传递数据

1.在src/components/left.vue中添加

html:

<template>
<div>
    {{title}}
</div>
</template>

js:

<script>
export default {
  name: 'left',
  data () {
    return {}
  },
  //12.07新增,父组件向子组件传递数据
  props: ['title'],
}
</script>

2.在src/components/HelloWorld.vue去传递给子组件值

html:

<template>
  <div>
    <!--左边的组件-->
    <left v-bind:title="message"></left>
  </div>
</template>

js

<script>
//12.07新增_引入组件
import left from './left';
    
export default {
  name: 'HelloWorld',
  data () {
    return {
        //用户输入的内容
        message: '这个是父级的内容',
    }
  },
  //12.07新增_引入组件
  components: {
    left,
  },
}
</script>