组件是 vue 框架比较核心的内容,那么什么是组件呢?
通俗点讲:组件是由一堆 html, CSS, javascript 组成的代码片段, 作用是为了实现模块的重用
组件的基本用法:
- <div id="box">
- <ccc></ccc>
- </div>
- <ccc></ccc>
- <script>
- //构造组件
- var c = Vue.extend({
- template : '<h3>这是个标题</h3>'
- });
- //注册组件, 注册了一个名称为ccc的组件,组件的内容是c
- Vue.component('ccc',c); //全局注册
- new Vue({
- el : '#box'
- });
- </script>
组件的编译解释原理:
1,首先用 Vue.extend 创建一个组件,用 template 设置组件的内容
2,用 Vue.component 注册一个全局组件, 第一个参数为组件的名称, 第二个参数为组件的内容
3,在 vue 的实例,也可以这么说,在 vue 这个根组件下 用 el 指定这个组件 显示在哪个元素下
那么组件运行流程可以这么理解:
在上例中, 首先发现第 2 行有个自定义组件 <ccc></ccc> 然后 去 12 行 查找 <ccc> 组件对应的内容 c, 而 c 的内容是 <h3> 这是个标题 </h3> 所以 <ccc> 就被替换成这个标题, 而 第 4 行的 <ccc> 组件 是不会被解释的,
因为组件只在 id 为 box 的元素下会被编译解释.
- <div id="box1">
- <ccc></ccc>
- </div>
- <div id="box2">
- <ccc></ccc>
- </div>
- <ccc></ccc>
- <script>
- var c = Vue.extend({
- template: '<h3>我是一个标题</h3>'
- });
- Vue.component("ccc", c); //注册全局组件
- new Vue({
- el: '#box1'
- });
- new Vue({
- el: '#box2'
- });
- </script>
上例,我们把全局注册的 ccc 组件,分别显示在 id 为 box1 和 box2 的元素下,所以第 7 行的 <ccc> 组件就不会被编译解释.
全局组件与局部组件:
全局组件:用 Vue.component 注册的组件叫全局组件
局部组件: 把组件注册到另一个组件 (C) 的里面,叫局部组件,这个组件只能在 C 下面使用
- <div id="box1">
- <ccc></ccc>
- </div>
- <div id="box2">
- <ccc></ccc>
- </div>
- <script>
- var c = Vue.extend({
- template : '<h3>这是标题</h3>'
- });
- new Vue({
- el : '#box2',
- components : { //注册局部组件, 只能在#box2下面使用
- "ccc" : c
- }
- });
- </script>
上例,id 为 box1 下面的 ccc 组件不会被编译解释,因为 ccc 组件被注册为 vue 实例 (根组件) 下面的一个局部组件, 而这个局部组件又被显示在 id 为 box2 下面.
父组件与子组件:
- <div id="box">
- <bbb>
- </bbb>
- </div>
- <script>
- var a = Vue.extend({
- template: '<h3>我是组件a</h3>'
- });
- var b = Vue.extend({
- template: '<h3>我是组件b</h3><aaa></aaa>',
- components: { //把a组件注册在b组件的下面
- "aaa": a
- }
- });
- Vue.component("bbb", b);
- new Vue({
- el: "#box"
- });
- </script>
上例,用 Vue.extend 构造了两个组件,一个 <aaa> 一个 <bbb>, 而 <aaa> 组件又被注册在 <bbb> 组件里面,所以是 <bbb> 的子组件.
运行原理:
首先在第 2 行发现 <bbb></bbb> 组件, 然后在第 14 行寻找到 <bbb> 组件的对应内容为 b 也就是
- <h3>我是组件b</h3><aaa></aaa>
然后,又发现了 <aaa>,然后在第 11 行找到 <aaa> 组件的对应内容为 a 于是用 a 的模板内容 <h3> 我是组件 a</h3> 替换 <aaa> 组件,所以上面这段内容就变成
- <h3>我是组件b</h3><h3>我是组件a</h3>
简化全局组件的注册方式:
可以把组件的构造与注册用 Vue.component 简写
- <div id="box">
- <aaa>
- </aaa>
- </div>
- <script>
- Vue.component('aaa', {
- template: '<h3>我是标题</h3>' //同时创建与注册, 会自动调用Vue.extend
- });
- new Vue({
- el: "#box"
- });
- </script>
简化局部组件的注册方式:
- <div id="box">
- <aaa></aaa>
- <bbb></bbb>
- <bbb></bbb>
- </div>
- <aaa></aaa>
- <bbb></bbb>
- <script>
- new Vue({
- el: '#box',
- components: {
- aaa: {
- template: '<h3>我是a组件</h3>'
- },
- bbb: {
- template: '<h3>我是b组件</h3>'
- }
- }
- });
- </script>
上例,第 6 行和第 7 行不会被编译解释,因为 <aaa> 组件和 <bbb> 组件被指定在 id 为 box 的元素下面编译显示
<script> 标签分离模板内容
- <div id="box">
- <aaa>
- </aaa>
- <bbb>
- </bbb>
- </div>
- <script type="x-template" id="a">
- < h3 > 我是a组件 < /h3>
- <p>我是段落a</p >
- </script>
- <script type="x-template" id="b">
- < h3 > 我是b组件 < /h3>
- <p>我是段落b</p >
- </script>
- <script>
- new Vue({
- el: '#box',
- components: {
- "aaa": {
- template: '#a' //找到id为a的模板, 把他的内容进行编译
- },
- "bbb": {
- template: '#b'
- }
- }
- });
- </script>
在 <script> 标签中指定 type 为 x-template 就不会认为 <script> 标签之间的内容是 javascript 代码,而是被当做组件模板
运行原理:
在第 2 行发现 <aaa> 组件,然后在第 17 行发现 <aaa> 组件定义的模板 template 指定了一个 id 为 a 的 <script> 标签模板,所以用 id 为 a 的 <script> 模板里面的内容去替换组件 <aaa>
第 3 行的组件 <bbb> 同上
用 template 分离模板内容
- <div id="box">
- <aaa></aaa>
- <bbb></bbb>
- </div>
- <template id="a">
- <h3>我是a组件</h3>
- <p>我是段落a</p>
- </template>
- <template id="b">
- <h3>我是b组件</h3>
- <p>我是段落b</p>
- </template>
- <script>
- new Vue({
- el : '#box',
- components : {
- "aaa" : {
- template : '#a' //找到id为a的模板, 把他的内容进行编译
- },
- "bbb" : {
- template : '#b'
- }
- }
- });
- </script>
运行原理同上,只不过把模板标签从 <script> 换成 <template>
来源: http://www.cnblogs.com/ghostwu/p/7388570.html