08 Vue中创建单文件组件 注册组件 以及组件的使用

组件的声明生成

1.在src目录下新建一个名为components的文件夹，在文件中新建一个文件夹，可命名为Home.vue.

<template>
	<div>
		<h2>这是一个首页组件</h2>
		{{msg}}
		<button @click="run()">执行run方法</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '我是一个首页组件！'
			}
		},
		methods: {
			run() {
				alert('你好呀！');
			}
		},
	}
</script>

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

组件的引入、挂载及使用

在App.vue中写入

<template>
	<div id="app">
		<h2>我是一个跟组件</h2>
		<v-home></v-home>
		<br><hr>
		<v-news></v-news>
	</div>
</template>

<script>
	/*
	 * 1.引入组件
	 * 
	 * 2.挂载组件
	 * 
	 * 3.在模板中使用
	 */
	import Home from './components/Home.vue';
	
	export default {
		name: 'app',
		data() {
			return {
				msg: '你好，Vue！'
			}
		},
		components: {
			'v-home': Home,
		}
	}
</script>

<style lang="scss">

</style>

组件间的相互嵌套、互相挂载

不同组件之间可以相互挂载，区别点只是根的不同，最大的根是App.vue组件。
如下图组件之间的相互关系，实现的步骤还是原来的生成、导入、挂载、使用！

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

参考链接：https://cn.vuejs.org/v2/guide/components.html