Vue 全局注册逐渐 和 局部注册组件
//定义一个名为 button-counter 的新组件
Script:
Vue.component('button-counter',{//button-counter 这个是组件的名字
data:function(){
return{
count:0
}
},
template:'<button v-on:click="count++">单击 {{ count }}</button>'
})
组件是可复用的Vue 实例，并且有一个名字：
我们可以在一个通过 new Vue 创建的Vue根实例中，
把这个组件作为 自定义元素(自己定义的标签 这样来理解) 来使用：
Html:
<div id="components-demo">
<button-counter></button-counter>
</div>
Script:
new Vue({ el: '#components-demo' })//指定挂载位置
new 了一个Vue 实例
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
自己的理解：因为组件是可复用的 Vue 实例
就是一个特殊的Vue实例，而这个实例 和new vue区别在 组件是可以复用的。
而且他还可以接收 data /computed/watch/methods 等选项
component(组件) 的复用
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-cunter>
<button-counter></button-counter>
</div>
注意：当单击按钮时，每个组件都会给自独立维护它的 count 。
因为你每用一次组件，就会有一个它的新实例被创建
理解：这里的每用一次 是 单击一次还是 <button-counter></button-counter>标签被使用一次
作用域不同
复用不仅仅是代码上的复用 更是功能的复用，而且每次复用都是一个新的实例
data 必须是一个函数
当我们定义<button-counter>组件时，你可能会发现他的data并不是像这样直接提供一个对象
data:{
count:0
}
而是：
Vue.components('button-counter',{
tempalte:'<p>我是一个组件是一个模板，这个是我自己的理解</p>',
data:function(){
return {
count:0
}
}
})
一个组件的data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立拷贝
自己理解 条件 ： 一个组件假如有data选项此选项必须是一个函数
也必须还有一个templtae选项
每个名字映射着一份且在内存中独立区域，彼此之前不存在数据的交换
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。个人认为就是一个可以重复利用的结构层代码片段。
全局组件注册方式：Vue.component(组件名,{方法})
组件的组织
通常一个应用会一一颗嵌套的组件树的形式来组织
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的
注册类型：全局注册
局部注册。
至此，我们的组件都只是通过 ：
Vue.component 全局注册的：
Vue.component('my-conponent-name',{
//。。。options....
})
注意 1:
全局注册的组件可以用在其被注册之后的任何(通过new Vue)新创建的Vue根实例，也包括其组件树种的索引子组件的
模板中。
全局组件必须写在new Vue()创建之间，才在该根元素下面生效。
<body>
<div id='app'>
<my-component></my-component>
</div>
<div id='app-1'>
<my-component></my-component>
</div>
</body>
<scirpt>
Vue.component('my-component',{
template:"<h1>我是全局组件,{{ msg }}</h1>"，
data(){
return{
msg:'有时候努力不一定会有回报，但是还是有一丝丝的可能的。'
}
}
})
new Vue({
el:'#app'//申明挂载点
});
new Vue({
el:'#app-1'
})
</scirpt>
渲染效果：
<div id="app">
<h1>我是全局组件，有时候努力不一定会有回报，但是还是有一丝丝的可能的。</h1>
</div>
<div id="app-1">
<h1>我是全局组件，有时候努力不一定会有回报，但是还是有一丝丝的可能的。</h1>
</div>
注意 2：
模板里面第一级 只能有一个标签，不能并行
Vue.component("my-component",{
template:"<h1>我是全局组件</h1>" +
"<p>我是全局组件内标签</p>"
});
//因为这里h1 和 p 标签在同一级别里面了
所以会报错
修改如下：
Vue.component("my-component",{
template:"<h1>我是全局组件<p>" +
"我是全局组件内标签</p></h1>"
});
局部注册方式：
直接在Vue实例里面注册
<body>
<div id='app1'>
<child-component></child-component>
</div>
<script>
new Vue({
el:'#app1',
components:{
"child-component":{
template:'<h1>我是局部组件</h1>'
}
}
});
//这样行不行
new Vue({//这是 实例化一个 根实例
el:'#app1', //这个也是属性 这个属性是用来 确定 挂载点的
components:{//这是属性 这个属性是用来注册组件的
"child-component":template:'<p>这样估计不行</p>'
}
});
</script>
注意：
在Vue 直接定义组件时
属性components 是复数形式:(自己理解，组件的数量不确定吗)
多组件定义时 应该如下：
<body>
<div id='app1'>
<child-component-2></child-component-2>
<child-component-1></child-component-1>
</div>
<script>
var child1={
template:'我是一个局部组件'
};
var child2={
templae:'<h1>我也是一个局部组件，你咬我啊！</h1>'
};
new Vue({
el:'#app1',
components:{
"child-component-1":child1,
"child-component-2":child2
}
});
</scirpt>
</body>
自定义局部组件：另外一种情况
其它属性可以和实例中一样，但是data属性必须是一个函数：
<body>
<div id="app1">
<child-component></chidl-component>
</div>
<scirpt>
var child={
teamplate:'<button @click="add2">我是局部组件，我传递了一个消息:{{ msg }},次数:{{ count }}</button>',
data:function(){
return {
msg:'世界很美，要懂得发现美好！',
count:1
}
},
methods:{
add2：function(){
this.count++
}
}
};
//可不可以这样写：
var child={
teamplate:'<button @click="add2">我是局部组件，我传递了一个消息:{{ msg }},次数:{{ count }}</button>',
data(){
return {
msg:'世界很美，要懂得发现美好！',
count:1
}
},
methods:{
add2：function(){
this.count++
}
}
};
new Vue({
el:'#app1',
components:{//注册局部组件并且给它取了一个名字 child-components 这个名字是用在html中的，说白了 就是自定义了一个html 标签而已。
"child-components":child
}
});
</scirpt>
</body>
Vue
Vue 全局注册逐渐 和 局部注册组件的更多相关文章
- vue 组件 全局注册和局部注册
全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...
- Vue组件全局/局部注册
全局注册 main.js中创建 Vue.component('button-counter', { data: function () { return { count: 0 } }, templat ...
- vue全局注册与局部注册的写法
vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...
- Vue全局组件注册
通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...
- vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息
评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位 splice(0,1,内容)把索引为0 ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- vue2.0之Vue Baidu Map 局部注册使用
文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...
- Vue全局弹窗:一次注册，全局可弹
Vue全局弹窗 今天来搞一个全局弹窗,不用每个文件都引入,只在main.js里作为全局原型引入就好了 先新建弹窗组件 toast.vue <template></template&g ...
随机推荐
- Tomcat运行javaweb项目时出现的一个bug
Stacktrace:with root cause java.net.ConnectException: Connection refused:........................... ...
- Delphi判断是否有全屏程序
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- Structs复习 包含外部xml和默认Actiion
包含外部xml 可以用 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PU ...
- Ajax 学习 第四篇
使用jQuery实现Ajax 跨域
- vc读取当前路径和读取配置ini文件
//获取路径 std::string GetApplicationDir() { HMODULE hModule = GetModuleHandleW(NULL); WCHAR wpath[MAX_P ...
- MySQL 服务无法启动
拷贝的mysql数据库配置文件的路径网络更改
- python import sklearn出错 "ImportError: DLL load failed: 找不到指定的模块。
安装好sklearn模块后,import的时候出现了以下错误: 但是确实已经装好了,百思不得其解,网上查找之后发现,出现错误原因:安装包的来源问题,也可以理解为包版本兼容问题,有的包使用官方出版,有的 ...
- pyspark 逻辑回归程序
http://www.qqcourse.com/forum.php?mod=viewthread&tid=3688 [很重要]:http://spark.apache.org/docs/lat ...
- 使用AJAX实现文件上传时Illegal invocation错误
在参数里面加 processData:false, 就行了
- php原样输出被编译过的html（适用于一些保存编辑器的内容）
有时候有些编辑器写进数据库时尖括号或双引号被编译过,这时候输入来就是处理一下,不然得不到原样的 输入用 html_entity_decode($content)就可以了,有些直接存完整html的,输 ...