Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用
一、组件
1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效):
html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 --> <my-component-name></my-component-name> script: Vue.component('my-component-name',{ template:'<div>这是第一种命名方式:kebab-case</div>' /* ... */ }) html中引用组件: <my-component-name></my-component-name> script: /* 根据大写字母隔开,my-component-name */ Vue.component('MyComponentName',{ template:'<div>这是第二种命名方式:PascalCase</div>' /* ... */ })
2> 全局组件与局部组件:
/* * 全局组件可以在根组件的任何子组件中使用 */ Vue.component('component-a',{/* ...组件相关配置... */})
/*
* 局部组件只能在当前注册的组件实例中生效,在其子组件中也不生效
*/
var componentb = { /* ...组件相关配置... */ }
var vm = new Vue({ el:'#app',
'component-b':componentb /* 局部注册组件 */ })
3> 动态组件(component)
4> 插槽(slot)
二、单文件组件
1> 组成:单文件组件有 模板(<template></template>)、脚本(<script></script>) 与 样式(<style><style>) 组成
<!-- 这是一个单文件组件 --> <template> <div>模板中只允许一个根元素,可以在这个根元素中进行编写DOM结构</div> </template> <script> /* export default:默认导出对象;在这里进行vue的相关选项配置与逻辑编写 */ export default{ name: 'App' } </script> /* * scoped:表示样式代码只在该组件中生效 * lang='stylus':表示样式使用stylus格式进行编写css */ <style lang='stylus' scoped> /* >>> 3个箭头表示修改外部样式(.样式2) */ .样式1 >>> .样式2 background:red </style>
2> 单文件组件的注册(局部注册):
<template> <div> <!-- 引入组件 --> <test-component> </test-component> </div> </template> <script> import TestComponent from '需要引入的组件路径' export default{ name: 'App', components : { TestComponent /* 与写法 TestComponent:TestComponent 一致,es6新特性 */ } } </script> <style lang='stylus' scoped> </style>
三、递归组件