App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
<!-- 3.在模板中使用 -->
<v-home></v-home>
<br>
<hr>
<v-news></v-news>
</div>
</template>
<script>
//1.引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
export default {
name: 'app',
data () {
return {
msg: '我是一个根组件'
}
},
//2.挂载组件
components:{//前面的组件名称不能和html一样
'v-home':Home,
'v-news':News
},
}
</script>
<style lang="scss">
</style>
Home.vue
<!-- 创建一个组件 -->
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div>
<v-header></v-header>
<hr>
<h2>这是一个首页组件--{{msg}}</h2>
<!-- v-on:click="run()" -->
<button @click='run()'>执行run方法</button>
</div>
</template>
<script>
//引入头部组件
import Header from './Header.vue';
export default {
data() {
return {
msg:'我是一个首页组件!!!'
}
},
methods:{
run(){
alert(this.msg);
}
},
components: {
'v-header':Header,
}
}
</script>
<style scoped lang="scss">
/*css scoped 局部作用域 */
h2{
color:red,
}
</style>
News.vue
<template>
<div>
<h2>新闻组件</h2>
<ul>
<li>
111111
</li>
<li>
22222
</li>
<li>
33333
</li>
<li>
444444
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
msg:'我是一个新闻组件',
}
},
components: {}
}
</script>
<style scoped lang="scss">
</style>
Header.vue
<template>
<div>
<h2 class="header">头部组件</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg:'我是一个头部组件',
}
},
components: {}
}
</script>
<style scoped lang="scss">
.header{
background: #3944e6;
color: red;
}
</style>
运行截图: