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>