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 ...
随机推荐
- 在JSP页面中导入jstl标签库
1 在工程中引用JSTL的两个jar包和标签库描述文件. (1)在项目上右击,从弹出的快捷键菜单中选择Properties命令,在出现的项目属性对话框上,选择DeploymentAssembly. ( ...
- ArcGIS案例学习笔记3_1_ArcMap编辑练习
ArcGIS案例学习笔记3_1_ArcMap编辑练习 计划时间:第三天上午 目的:ArcMap编辑练习 教程: pdf page67 数据: gis_ex10/ex07 方法: 1.新建shp文件 目 ...
- windows和linux下如何远程获取操作系统版本和主机名
远程获取windows和linux操作系统版本和主机名需要具备以下条件: 假设 主机A(windows 7),ip:192.168.12.2 主机B(centos 6.3),ip:192.168.12 ...
- [Android] Robotium手机自动化测试（仅需apk安装包版）——环境搭建 【转】
Robotium的手机自动化测试,很多都是利用app源代码里的Id定义来开发自动化脚本.而在我开始要为项目中的app写自动化测试脚本的时 候,开发的环境还很不稳定,app也还处于开发的状态中,而且,在 ...
- 学习JS的心路历程-范围Scope和提升(Hoisting)
在上一篇提到了JS有三种声明变量的方式,分别是var.const及let,var和const let最大区别就是范围(scope)的限制.所以在这一篇我们会详谈何谓范围链及他们的复写优先级. 范围Sc ...
- 看懂class文件 转
前言 现在周六公司进行一系列的java培训,刚上来就给我看class文件,比较头疼,不过感觉还是学到了一些东西,毕竟像老大说的,想要变得牛逼,是需要多学习多看的.好了,闲话不多说,我整理了一下思路,记 ...
- 在maven中classpath notfund
- 总是Eqw
1.投递总是Eqw状态 qstat -j job_ID #Eqw状态的job id qconf -sq all.q |grep host qconf -shgrp @allhosts
- bpm 学习笔记一
名词解释: DC: Development Component WD:Web Dynpro Keep DC Local for Now
- 关于解决java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoader问题
解决方案: 其实是你的jar文件没有同步发布到自己项目的lib目录中 (如果是用Maven进行构建的话) 可以试试 下面的办法 –rebuild下project就可以了 项目点击右键 点击 Prope ...