//定义一个名为 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>
1949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
