父组件
<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
网友评论