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 ...
随机推荐
- [重点]delphi删除部分字符串（不区分大小写）
type TDelFlags = set of (dfDelBefore, dfDelAfter); //删除ms字符串中endstr子字符串前面或后面的部分字符串 procedure Delstr( ...
- shell-保留文件系统下剩余指定数目的文件
path_backup=/mnt/fifth/backup/shellbackup path_delete=/mnt/fifth/tmp/rubbish/ limit_num=15 f ...
- ERROR: dump failed because assets could not be loaded
在命令行输入命令,想查看到app的包名,报错,如下: D:\测试\测试\android-sdk_r16-windows\android-sdk-windows\platform-tools>aa ...
- C# 监测每个方法的执行次数和占用时间（测试1）
在Nuget引用 Castle.DynamicProxy 和 Newtonsoft.Json 这个 原文:http://www.cnblogs.com/RicCC/archive/2010/03/15 ...
- C# Excel转换为Json
demo:https://files.cnblogs.com/files/guxingy/Excel%E8%BD%AC%E6%8D%A2%E4%B8%BAJson%E5%AF%B9%E8%B1%A1. ...
- selenium自动化测试安装，浏览器驱动版本对应
- 我在eclipse输出的第一个hello world！
下学期就要学习JAVA 语言,我现在对它好像还真的是一无所知.记得两次在帮学长做测评的时候,他们都说要装上eclipse.然后从放假我就忙着下载,安装,但是由于官网都是英文,似乎一直在出差错.询问了学 ...
- c 语言的复杂声明
简化的声明语法: dcl: optional *'s direct-dcl direct-dcl: name (dcl) direct-dcl() direct-dcl[optional size] ...
- redis编译安装
centos7 redis-4.0.6 make 报错 jemalloc.h: No such file or directory make MALLOC=libc MALLOC默认值是jemallo ...
- Python 爬虫常用模块
1. fake_useragent #pip install fake_useragent requests 2.图展示 pip install pyecharts pip install pyech ...