Vue.js的全局/局部组件填坑记
来源:互联网 发布:hadoop执行过程源码 编辑:程序博客网 时间:2024/05/16 15:45
玩Vue也有一段日子了,最近陷在组件坑里差点出不来,还好有SegmentFault高人指点,特将细节分享出来一起学习提高。
起因:最早一直用的是头文件引入Vue,即<script src="js/vue.min.js"></script>,这样做的缺点是每次都需要创建新实例且并不符合项目工程化的需求。
解决方案:使用node.js+npm安装Vue,再使用IDE(WebStorm)打开项目实现热加载。
问题:然后在使用全局组件的时候碰到一个坑:
<template> <div id="app"> <h1>This is a test file</h1> <span>{{ msg }}</span> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div></template><script> Vue.component( 'simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', data () { return { counter: 0 } } }) new Vue({ el: '#app', data () { return { msg: 'Hello, commander!' } } })</script>
代码如上,之前头文件引入vue.js能够正常工作,如图实现能够分别计数的simple-counter组件
而现在却报错了
度娘无果之后只好去SegmentFault提问,高人回答直戳要害:
https://segmentfault.com/q/1010000009870708?_ea=2079052
确实如大神所说在main.js已经实例化了Vue,如果再在单文件组件中创建实例会报错。
之后参照建议将全局组件放入main.js中,更新了代码:
App.vue:
<template> <div id="app"> <h1>This is a test file</h1> <span>{{ msg }}</span> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div></template>
<script> export default({ data () { return { msg: 'Hello, commander!' } } })</script>
import Vue from 'vue'import App from './App_1.vue'//全局组件Vue.component( 'simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', data () { return { counter: 0 } }})new Vue({ el: '#app', render: h => h(App)})
如图,果然能正常工作了!
同理,局部组件也是一样的写法:
<script> var Child = { template: '<button v-on:click="counter += 1">{{ counter }}</button>', data () { return { counter: 0 } } } export default({ data () { return { msg: 'Hello, commander!' } }, components: { 'simple-conter': Child } })</script>
与此同时我还发现了一个有趣的现象:当全局组件与局部组件同时存在的时候,全局组件会被局部组件覆盖!
进一步思考,如果项目组件部分过于庞大,使用单文件组件可能导致后期维护困难,所以可以考虑解耦:
将组件部分分离到另一个页面,使用的时候再import
App.vue:
<template> <div id="app"> <h1>This is a test file</h1> <span>{{ msg }}</span> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div></template><!--外部导入局部组件--><script> //引入 import simple_counter from './component/simple-counter.vue'; //注册 export default { data () { return { msg: 'Hello commander!' } }, components: { 'simple-counter': simple_counter } }</script>
simple-counter.vue:
<template> <div id="app"> <button v-on:click="counter += 1">{{ counter }}</button> </div></template><script type="text/javascript"> export default { data () { return { counter: 0 } } }</script>
解耦后的组件方便修改且易于查找,如此距离工程化的Vue项目又进了一步
阅读全文
3 0
- Vue.js的全局/局部组件填坑记
- vue 全局/局部组件
- Vue.js的组件(一)全局组件和局部组件
- vue全局组件与局部组件的方法
- vue 全局组件和局部组件
- vue 组件 全局注册与局部注册的方法
- vue 的局部组件
- 对于vue中的全局组件和局部组件的一点小见解
- vue全局组件和局部组件(一)
- vue全局组件和局部组件(二)
- vue开发:vue全局组件的方法
- 自定义vue全局组件use的使用
- VUE注册全局组件
- Vue-全局添加组件
- 2.0vue.js 全局组件模板例子说明
- 2.0vue.js 第二种组件局部写法
- vue-schart : vue.js 的图表组件
- js全局局部变量
- Activity创建过程
- TensorFlow学习---tf生成数据的方法
- Java后台之路(14)-JSP
- PHP自带方法验证邮箱、URL、IP是否合法
- thinking in java 阅读笔记 第四章 初始化和清除
- Vue.js的全局/局部组件填坑记
- test
- 安卓开发之自定义相机时图片变形问题
- 树学习(6)
- struts、spring 源码下载地址
- [LeetCode]600. Non-negative Integers without Consecutive Ones
- user版本qcom-system-daemon不编译问题
- Android控件TextView的实现原理分析
- ubuntu第一天