问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
ponent('my-component',{
template:"&div&如果我用 import 该怎么写这个全局组件&/div&"
子组件又需要怎么写
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
my_component.vue:
&template&
this is my {{title}}
&/template&
export default {
title:"component"
&template&
&my-component&&/my-component&
&/template&
import myComponent from './components/my_component' //这里引入
export default {
components:{myComponent},//这里注册
//some data
//some function
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在main.js开头引入组件，然后注册组件，例如：
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import SixiButton from 'components/common/SixiButton'
Vue.use(VueRouter)
Vue.use(VueResource)
ponent('six-button', SixiButton)
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：问题： (vue.js)全局注册组件为何显示Vue is not defined？
描述:在做一个组件demo的时候尝试不使用头部引用src="js/vue.min.js"，于是用node.js+npm+webstorm启动项目，代码如下：&template&&div&
&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&//注册
ponent( 'simple-counter', {
template: '&button v-on:click="counter += 1"&{{ counter }}&/button&',
counter: 0
//创建实例
el: '#app',
msg: 'Hello, commander!'
})&/script&然后浏览器就会报错：如果用另一种方式就没有问题App.vue:&template&&div&
&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 {
msg: 'Hello commander!'
components: {
'simple-counter': simple_counter
}&/script&simple-counter.vue:&template&&div&
&button v-on:click="counter += 1"&{{ counter }}&/button&
&/div&&/template&&script type="text/javascript"&export default {
counter: 0
}&/script&能够成功跑出来
上一篇： 下一篇：详解vue.js全局组件和局部组件
作者：周森
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了详解vue.js全局组件和局部组件，实例分析了全局组件和局部的技巧，有兴趣的可以了解一下。
这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。
首先Vue组件的使用有3个步骤，创建组件构造器，注册组件，使用组件3个方面。
代码演示如下：
&!DOCTYPE html&
&div id="app"&
&!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件--&
&my-component&&/my-component&
&script src="js/vue.js"&&/script&
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '&div&This is my first component!&/div&'
// 2.注册组件，并指定组件的标签，组件的HTML标签为&my-component&
ponent('my-component', myComponent)
el: '#app'
2.理解组件的创建和注册
我们用以下几个步骤来理解组件的创建和注册：
1. Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。
2. Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。
3. 使用ponent()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。
4. ponent()方法内部会调用组件构造器，创建一个组件实例。
5. 组件应该挂载到某个Vue实例下，否则它不会生效。
请注意第5点，以下代码在3个地方使用了&my-component&标签，但只有#app1和#app2下的&my-component&标签才起到作用。
&!DOCTYPE html&
&div id="app1"&
&my-component&&/my-component&
&div id="app2"&
&my-component&&/my-component&
&!--该组件不会被渲染--&
&my-component&&/my-component&
&script src="js/vue.js"&&/script&
var myComponent = Vue.extend({
template: '&div&This is a component!&/div&'
ponent('my-component', myComponent)
var app1 = new Vue({
el: '#app1'
var app2 = new Vue({
el: '#app2'
全局注册和局部注册
调用ponent()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。
如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。
上面的示例可以改为局部注册的方式：
&!DOCTYPE html&
&div id="app"&
&!-- 3. my-component只能在#app下使用--&
&my-component&&/my-component&
&script src="js/vue.js"&&/script&
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '&div&This is my first component!&/div&'
el: '#app',
components: {
// 2. 将myComponent组件注册到Vue实例下
'my-component' : myComponent
由于my-component组件是注册在#app元素对应的Vue实例下的，所以它不能在其它Vue实例下使用。
&div id="app2"&
&!-- 不能使用my-component组件，因为my-component是一个局部组件，它属于#app--&
&my-component&&/my-component&
el: '#app2'
如果你这样做了，浏览器会提示一个错误。
//注册组件(全局 component)
ponent("my-component",{
template:'&div&这是一个全局组件测试 &/div&'
el:"#app5"
//(局部components)
el:"#app6",
components:{
'test-component':{
template:"&div&这是一个局部的组件测试&/div&"
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具如何在Vue中建立全局引用或者全局命令
时间： 20:37:10
&&&& 阅读：954
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&1 一般在vue中，有很多vue组件，这些组件每个都是一个文件。都可能需要引用到到相同模块。我们不想每个文件都import 一次模块。
如果是vue编写的插件我们可以用 Vue.use(...)
&2 但是如果想添加一个全局命令，同时又让每个vue的文件都能用到怎么办？
第一步：最好建立一个全局的命令文件例如：directive/directive.js
第二步：利用Vue.directive()建立一个全局命令，并将它暴露出来，例如一个focus 让表单自动聚焦
第三部步：在main.js（入口JS文件）中将它引入，可以省略文件后缀
这样任何一个Vue文件只要这样v-focus(命令名)，就可以很方便的用到了
3 &Vue.directive() 的命令一般都是自动运行的或者说初始化等等触发的，并不能用于异步事件，怎么办？
于是我们可以用到’mixins‘ 混合命令，你最好建立一个专门的文件夹用于存放混合命令，例如：
比如&saveScrollPosition （不是vue中的saveScrollPosition）可以每次在路由跳转之间保存住浏览位置信息
注意：vue2.0 中 路由跳转之间会自动保存位置信息 但是有Bug（位置信息之间会相互干扰）。
&所以我们从新写一个saveScrollPosition暴露出去后，在你需要的页面中混入
这样就会很方便。
4 如果你需要应用一个插件，同时他并不用vue的插件命令编写的，那你可以将它赋予Vue的原型上
例如：我想全局引用axios，我们可以这样
然后this.$http.get(url) 等等
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！}