一、组件的创建及使用
1.创建组件
在src/components文件夹下创建Home.vue组件，组件的html部分需要用<template>根节点包围起来，同时可以设置组件样式以及组件函数：
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div>
<h2>这是一个首页组件 ---- {{msg}}</h2>
<button @click="run">点击运行</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: '我是一个组件'
}
},
methods: {
run() {
alert(this.msg);
}
}
}
</script>
<style lang="scss">
h2 {
color: red;
}
</style>
备注：所有引入该组件的对象中，同时引入了该组件的样式和函数，同样会生效！！！比如样式名一样时，就会继承组件的样式，但是函数名一样时不会继承（我猜测函数自带作用域，只在本组件中生效！！）
若想组件中的样式只在该组件中生效，有两种方式：
第一种 设置id方式：
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
<h2>这是一个首页组件 ---- {{msg}}</h2>
<button @click="run">点击运行</button>
</div>
</template>
<script>
.
</script>
<style lang="scss">
// 让 h2 样式对象只在该组件中生效（否则，所有引入该组件的对象都会应用h2样式）
#home {
h2 {
color: red;
}
}
</style> 第二种 设置scss的scoped属性方式：
// scoped作用域
<style lang="scss" scoped>
// 让 h2 样式对象只在该组件中生效（否则，所有引入该组件的对象都会应用h2样式）
h2 {
color: red;
}
</style>2.引入组件、挂载组件
<script>
// 1.引入组件
import Home from './components/Home.vue';
export default {
name: 'app',
data() {
return {
todo: '',
list: []
}
},
components: {
// 2.挂载组件
"v-home": Home
}
}
</script>3.使用组件
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div>
<!-- 3.使用组件 -->
<v-head></v-head>
<h2>这是一个首页组件 ---- {{msg}}</h2>
<button @click="run">点击运行</button>
</div>
</template>
