vue-03-5：vue自定义组件并在其他地方引用该组件

vue-03-5：vue自定义组件并在其他地方引用该组件

一、自定义一个组件

1、在src/components新建一个组件

注意事项：

a、新定义的组件一定要使用template标签包裹。

b、每个自定义主键可能都有自己自定义的样式，如果不想该组件自定义样式被引入到其他页面破坏该页面的样式，在自定义组件的style标签中加入下面的属性lang="scss" scoped,注意要事先cnpm install sass-loader --save 和 cnpm install node-sass --save这两个插件，以免编译异常。当然也是可以通过唯一id来进行样式修饰，但是可能自定义组件id和要引入页面一致，所以推荐使用scoped方式。

错误信息解决方式参见以下博客：

https://www.cnblogs.com/hexiaobao/p/8260858.html

https://blog.csdn.net/u012976879/article/details/83819741

<template>
	<h1>vue组件{{msg}}</h1>
</template>

<script>
	export default {
		data() {
			return {
				msg: 'helloVue'
			};
		}
	}
</script>

<style lang="scss" scoped>
	h1{
		color:red;
	}
</style>

2、在新页面引入组件

按照以下三个步骤即可引入自定义组件页面：

<template>
	<div>
	<h1>这是vue的methos页面</h1>
	<input type="text" v-model="todo" />
	<button type="button" v-on:click="getStorage">点击</button>
	<!-- 引入组件3-->
    <v-com></v-com>
	</div>
</template>
<script>
	// 引入封装的方法
	import storage from '@/utils/storage.js';
	// 引入组件1
	import componet from '@/components/component.vue';
	export default {
		data() {
			return {
				todo: '',
			};
		},	
        // 引入组件2
		components:{
			"v-com": componet,
		},
		methods:{
			getStorage(){
				alert(this.todo);
				console.log(storage.get('userInfo'));
			},		
		},		
		mounted() {
			storage.set('userInfo',"{name:'yinyuyou',sex:'man'}");
		},
	}
</script>
<style>

</style>