九、Vue组件

一、组件的创建及使用

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>