Vue中创建单文件组件 注册组件 以及组件的使用
转载
<template>
<div id="app">
<v-home></v-home>
<hr >
<br>
<v-news></v-news>
</div>
</template>
<script>
/*
1、引入组件
2、挂载组件
3、在模板中使用
*/
import Home from './components/Home.vue';
import News from './components/News.vue';
export default {
data () {
return {
msg:'你好vue'
}
},
components:{ /*前面的组件名称不能和html标签一样*/
'v-home':Home,
'v-news':News
}
}
</script>
<style lang="scss">
</style>
<template>
<div>
<h2 class="header">这是一个头部组件</h2>
</div>
</template>
<script>
export default {
data(){
return{
msg:'这是一个头部组件'
}
}
};
</script>
<style lang="scss">
.header{
background:#000;
color:#fff;
}
</style>
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
<v-header></v-header>
<br>
<hr>
<h2>这是一个首页组件--{{msg}}</h2>
<button @click="run()">执行run方法</button>
</div>
</template>
<script>
//引入头部组件
import Header from './Header.vue';
export default{
data(){
return {
msg:'我是一个首页组件msg'
}
},
methods:{
run(){
alert(this.msg);
}
},
components:{
'v-header':Header
}
}
</script>
<style lang="scss" scoped>
/*css 局部作用域 scoped*/
h2{
color:red
}
</style>
<template>
<div>
<v-header></v-header>
<h2>这是一个新闻组件</h2>
<ul>
<li >
111111
</li>
<li>
2222
</li>
<li>
333333
</li>
</ul>
</div>
</template>
<script>
//引入头部组件
import Header from './Header.vue';
export default {
data(){
return{
msg:'我是一个新闻组件'
}
},components:{
'v-header':Header
}
};
</script>
<style lang="scss">
</style>
