vue.js - VUE子组件的实例应该写在子组件还是父组件?
本文介绍了vue.js - VUE子组件的实例应该写在子组件还是父组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如题,有这样的场景
父组件代码示意
<div>
<mycomponent></mycomponent>
</div>
子组件中有这样的结构
<template>
<div id="app">
</div>
</template>
问题:
针对子组件的实例代码
new Vue({
el: '#app'
})
如果放在顶层父组件的JS代码部分,会提示找不到元素
如果放在子组件中,写到window.onload = funciton(){}
里面也会有错误提示
父子组件是通过vue-router实现的。
所以实例代码应该放在父组件还是子组件?为什么?
希望大神给出回复,感激不尽!!!!
解决方案
孩纸,看来你还没有玩转vue
,起码没搞清楚new vue
到底是怎么回事,作为启动应用的关键,new vue
这件事一般只做一次,不是对每个组件都来一遍的。看下图会有一个直观感受
然后建议你玩玩vue-router-skeleton,生成一个简单的,立即可见/用的小应用,以此为基础,修修改改看效果,多多理解!
vue init leftstick/vue-router-skeleton <project name>
补充:
其实你缺少的是对组件的理解/认识。文档中自然以一个new vue
作为示例,简单粗暴。因为vue-table
的文档旨在讲解这个组件本身,作者已经假设你懂vue
的设计/开发了(事实是你并不懂,所以这里就尴尬了)。
文档里的
new Vue({
el: '#app',
columns: [
'firstname',
'lastname',
'nickname',
'birthdate',
'group.name_en',
'gender',
'last_login',
'__actions'
]
})
其实关键部分就是columns
数组,因为在<vuetable api-url="/api/users" :fields="columns></vuetable>
里面用到了。其他部分都是构建一个可用的完整demo的骨架部分。对你的使用无意义。
如果不会引用组件,建议先用我给你的生成器生成一个项目,看看
home.vue
里是怎么引用其他组件的(虽然不是三方组件,但引用方式无区别)
这篇关于vue.js - VUE子组件的实例应该写在子组件还是父组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文