而资源名往往是写成驼峰式（比如camelCase驼峰式），或者单词首字母都大写的形式（比如PascalCase，我不知道该怎么称呼这个，不过这样写很少的说）。
Vue.component("myTemplate", { //......略 })
Vue.js可以自动识别这个并转换，
<my-template></my-template>
以上那个模板可以自动替换这个标签。
⑤递归组件：
简单来说，递归组件就是组件在自己里内嵌自己的模板。
组件想要递归，需要name属性，而Vue.component自带name属性。
大概样子是这样的，
<div> <my-template></my-template> </div> <script> Vue.component("myTemplate", { template: "<p><my-template></my-template></p>" })
这种是无限递归，肯定是不行的。因此，需要控制他递归的层数，例如通过数据来控制递归，当数据为空时，则停止递归。
示例代码如下：
<ul> <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这个属性，将被忽略）；
更多的参照官方文档：
⑦内联模板
参照：
以上所述是小编给大家介绍的Vuejs第十三篇之组件——杂项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: