Vuejs——（13）组件——杂项

版权声明：出处http://blog.csdn.net/qq20004604

 

目录(?)[+]

 

 

本篇资料来于官方文档：

http://cn.vuejs.org/guide/components.html#u6742_u9879

本文是在官方文档的基础上，更加细致的说明，代码更多更全。

简单来讲，更适合新手阅读

 

 

（三十）组件——杂项

①组件和v-for

简单来讲，就是组件被屡次复用；

 

例如表格里的某一行，又例如电商的商品橱窗展现（单个橱窗），均可以成为能够被复用的组件；

 

只要编写其中一个做为组件，而后使数据来源成为一个数组（或对象，但我的以为最好是数组），经过v-for的遍历，组件的每一个实例，均可以获取这个数组中的一项，从而生成所有的组件。

 

而数据传输，因为复用，因此须要使用props，将遍历结果i，和props绑定的数据绑定起来，绑定方法同普通的形式，在模板中绑定。

 

示例代码：

 

<div id="app">
    <button @click="toknowchildren">点击让子组件显示</button>
    <table>
        <tr>
            <td>索引</td>
            <td>ID</td>
            <td>说明</td>
        </tr>
        <tr is="the-tr" v-for="i in items" v-bind:id="i" :index="$index"></tr>
    </table>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            items: [1, 2, 3, 4]
        },
        methods: {
            toknowchildren: function () {   //切换组件显示
                console.log(this.$children);
            }
        },
        components: {
            theTr: { //第一个子组件
                template: "<tr>" +
                "<td>{{index}}</td>" +
                "<td>{{id}}</td>" +
                "<td>这里是子组件</td>" +
                "</tr>",
                props: ['id','index']
            }
        }
    });
</script>

 

说明：

【1】记得将要传递的数据放在props里！

 

【2】将index和索引$index绑定起来，由于索引从0开始，所以索引所在列是从0开始；id是和遍历items的i绑定在一块儿的，所以id从1开始。

 

【3】能够在父组件中，经过this.$children来获取子组件（可是比较麻烦，特别是组件多的时候，比较难定位）；

 

 

 

②编写可复用的组件：

简单来讲，一次性组件（只用在这里，不会被复用的）跟其余组件紧密耦合是能够的，可是，可复用的组件应当定义一个清晰的公开接口。（否则别人怎么用？）

 

可复用的组件，基本都是要和外部交互的，而一个组件和外部公开的交互接口有：

【1】props：容许外部环境数据传递给组件；

【2】事件：容许组件触发外部环境的action，就是说经过在挂载点添加v-on指令，让子组件的events触发时，同时触发父组件的methods；

【3】slot：分发，容许将父组件的内容插入到子组件的视图结构中。

 

如代码：

<div id="app">
    <p>这是第一个父组件</p>
    <widget
            :the-value="test"
            @some="todo">
        <span>【第一个父组件插入的内容】</span>
    </widget>
</div>
<div id="app2">
    <p>这是第二个父组件</p>
    <widget @some="todo">
    </widget>
</div>
<script>
    Vue.component("widget", {
        template: "<button @click='dosomething'><slot></slot>这是一个复用的组件，点击他{{theValue}}</button>",
        methods: {
            dosomething: function () {
                this.$emit("some");
            }
        },
        events: {
            some: function () {
                console.log("widget click");
            }
        },
        props: ['theValue']
    })

    var vm = new Vue({
        el: '#app',
        data: {
            test: "test"
        },
        methods: {
            todo: function () {
                console.log("这是第一个父组件")
            }
        }
    });
    var vm_other = new Vue({
        el: '#app2',
        data: {
            name: "first"
        },
        methods: {
            todo: function () {
                console.log("这是另一个父组件")
            }
        }
    });
</script>

说明：

【1】在第一个父组件中使用了分发slot，使用了props来传递值（将test的值传到子组件的theValue之中）；

 

【2】在两个组件中，子组件在点击后，调用methods里的dosomething方法，而后执行了events里的some事件。又经过挂载点的@some=”todo”，将子组件的some事件和父组件的todo方法绑定在一块儿。

所以，点击子组件后，最终会执行父组件的todo方法。

 

【3】更改父组件中，被传递到子组件的值，会同步更改子组件的值（即两者会数据绑定）；

 

 

 

③异步组件：

按照个人理解，简单来讲，一个大型应用，他有多个组件，但有些组件无需当即加载，所以被分拆成多个组件（好比说须要当即加载的，不须要当即加载的）；

 

须要当即加载的，显然放在同一个文件中比较好（或者同一批一块儿请求）；

 

而不须要当即加载的，能够放在其余文件中，但须要的时候，再ajax向服务器请求；

 

这些后续请求的呢，就是异步组件；

 

作到这种异步功能的，就是Vue.js的功能——容许将组件定义为一个工厂函数，动态解析组件的定义。

 

能够配合webpack使用。

 

至于如何具体使用，我还不太明白，教程中写的不清，先搁置等须要的时候来研究。

 

连接：

http://cn.vuejs.org/guide/components.html#u5F02_u6B65_u7EC4_u4EF6

 

 

 

④资源命名的约定：

简单来讲，html标签（好比div和DIV是同样的）和特性（好比要写成v-on这样的指令而不是vOn）是不区分大小写的。

 

而资源名每每是写成驼峰式（好比camelCase驼峰式），或者单词首字母都大写的形式（好比PascalCase，我不知道该怎么称呼这个，不过这样写不多的说）。

Vue.component("myTemplate", {
    //......略
})

 

Vue.js能够自动识别这个并转换，

<my-template></my-template>

 

以上那个模板能够自动替换这个标签。

 

 

 

⑤递归组件：

简单来讲，递归组件就是组件在本身里内嵌本身的模板。

 

组件想要递归，须要name属性，而Vue.component自带name属性。

 

大概样子是这样的，

<div id="app">
    <my-template></my-template>
</div>
<script>
    Vue.component("myTemplate", {
        template: "<p><my-template></my-template></p>"
    })

这种是无限递归，确定是不行的。所以，须要控制他递归的层数，例如经过数据来控制递归，当数据为空时，则中止递归。

 

示例代码以下：

<ul id="app">
    <li>
        {{b}}
    </li>
    <my-template v-if="a" :a="a.a" :b="a.b"></my-template>
</ul>
<script>
    Vue.component("myTemplate", {
        template: '<ul><li>{{b}}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>',
        props: ["a", "b"]
    })
    var data = {
        a: {
            a: {
                a: 0,
                b: 3
            },
            b: 2
        },
        b: 1
    }
    var vm = new Vue({
        el: '#app',
        data: data,
        methods: {
            todo: function () {
                this.test += "!";
                console.log(this.test);
            }
        }
    });
</script>

说明：

【1】向下传递时，经过props传递a的值和b的值，其中a的值做为递归后组件的a和b的值的数据来源；

而后判断传递到递归后的组件的a的值是否存在，若是存在则继续递归；

若是a的值不存在，则中止递归。

 

 

 

⑥片段实例：

简单来讲，所谓片段实例，就是组件的模板不是处于一个根节点之下：

 

片段实例代码：

Vue.component("myTemplate", {
    template: '<div>1</div>' +
    '<div>2</div>',
})

非片段实例：

Vue.component("myTemplate", {
    template: '<div>' +
    '<div>1</div>' +
    '<div>2</div>' +
    '</div>',
})

片段实例的如下特性被忽略：

【1】组件元素上的非流程控制指令（例如写在挂载点上的，由父组件控制的v-show指令之类，但注意，v-if属于流程控制指令）；

 

【2】非props特性（注意，props不会被忽略，另外props是写在挂载点上的）；

 

【3】过渡（就是transition这个属性，将被忽略）；

 

更多的参照官方文档：

http://cn.vuejs.org/guide/components.html#u7247_u65AD_u5B9E_u4F8B

 

 

 

⑦内联模板

参照：http://cn.vuejs.org/guide/components.html#u5185_u8054_u6A21_u677F

 

反正我试了下失败了，google也没搜到相关的内容，┑(￣Д ￣)┍

 

 

————————组件的基本知识到这里结束————————————