Vue.js框架--创建单个组件和组件的使用（九）

主要操作技能：

     1.创建单个组件

     2.应用组件步骤

       a）引入组件  import Home from './components/Home.vue';
       b）挂载组件
           components: { 
               'v-home': Home
          }
       c）在模板中使用组件
          <v-home></v-home> 

项目如下：  

编写代码：

 App.vue

<template>
	<div id="app">
		<!--<h2>这是根组件</h2> {{msg}}
		<br /><br />-->
		<!--3.在模板中使用-->
		<v-home></v-home>
		<br /><br />
		<hr />
		<v-news></v-news>

	</div>
</template>

<script>
	import Home from './components/Home.vue'; //1.引入组件
	import News from './components/News.vue';
	export default {
		name: 'app',
		data() { //业务逻辑的数据
			return {
				msg: 'hello'
			}
		},
		components: { //2.挂载组件
			/*前面组件名称不能与html标签相同*/
			'v-home': Home,
			'v-news': News
		}
	}
</script>

 Home.vue

<template>
	<!--所以的内容多要被根节点包含起来 -->
	<div>
		<v-header></v-header> <!--3.使用组件-->
		<h2>首页组件</h2>
		<button @click="run()">execute</button>
	</div>
</template>

<script>
	import Header from './Header.vue'; //1.引入头部组件
	export default {
		data() { //数据
			return {
				msg: '我是首页组件'
			}
		},
		methods: { //方法
			run() {
				return alert(this.msg);
			}
		},
		components:{ //2.挂载组件
			'v-header':Header  
		}
	}
</script>

<style lang="scss" scoped>
/*css 局部作用域scoped	*/
	h2{
		color:red;
	}
</style>

 News.vue

<template>
	 <div>
	 	<v-header></v-header>
	 	<br/><br />

	 	<!--<h2>这是一个苹果组件</h2>-->
	 	<h2>{{msg}}</h2>
	     <ul>
	     	<li>apple</li>
	     	<li>banana</li>
	     	<li>pear</li>
	     </ul>
	 </div>
</template>

<script>
	//1.引入头部组件
	import Header from './Header.vue';
	export default{
		data(){
			return{
				msg:'这是一个苹果组件哦哦!'
			}
		}, 
		components:{ //2.挂载组件
			'v-header':Header
		}
	}
</script>

<style lang="scss">
</style>

 Header.vue

<template>
	<div>
		<h2 class="bg">{{msg}}</h2>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				msg:'这是一个头部组件'
			}
		}
	}
</script>

<style lang="scss">
  .bg{
  	background:dimgray;
  	color:#fff;
  }
</style>

效果：