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>
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-06-20 12:22 LoaderMan 阅读(2218) 评论(0) 编辑 收藏 举报