超级简单vue父组件传值给子组件

父组件

<template>
    <div id="app">
      <!-- 引入组件 -->
      <TextGroup myName="我要找儿子" ></TextGroup>
    </div>
</template>

<script>
  import TextGroup from './components/Text-Group'
  export default {
    el:'#app',
    components:{
      TextGroup,
    },
    methods:{
     
      }
  }
</script>

子组件

<template>
    <div v-bind:class="['wrap']">
      <div>{{myName}}</div>
      <div>床前明月光</div>
    </div>
</template>
<script>
export default {
  name: 'Text-Group',
  props:['myName'],
}
</script>
<style>
.wrap{
  color:blue;
}
</style>

效果图

image.png

步骤
父组件

image.png
子组件
image.png