示例代码请访问我的 GitHub: https://github.com/chencl1986/vue-tutorial
该节教程代码可通过 NPM start 运行 devServer, 在 http://localhost:8080 / 查看效果
注册 Vue 组件
示例代码:/lesson15/src/cmp1.JS
通过 Vue.component 可以注册一个组件, 再将其导出到入口 vm.JS 即可.
- import Vue from 'vue/dist/vue.esm';
- // 通过 Vue.component 注册一个组件
- export default Vue.component('cmp1', {
- props: ['name', 'age', 'list'], // 定义要传入的 props, 在 Vue 中只有已定义的 props 才可以被组件接收到
- data(){ // 组件的 data 必须是函数, 为了保证组件的 data 作用域独立
- return {a: 77, b: 55};
- },
- // 组件模板
- template: `
- <div>
姓名:{{name}}<br/>
年龄:{{age}}<br/>
- <ul>
- <li v-for="item in list">{{item}}</li>
- </ul>
- </div>
- `
- });
使用组件
示例代码:/lesson15/src/vm.JS
可以直接通过 < cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]" /> 使用组件, 这样无论何种情况, 组件都会直接被渲染在页面中.
也可以通过通用组件 < component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]" /> 使用, is 属性为需要使用的组件名, 通过改变该属性的值, 可以控制渲染的组件.
- import Vue from 'vue/dist/vue.esm';
- import Cmp1 from './cmp1';
- let vm=new Vue({
- el: '#div1',
- data: {
- type: 'cmp1'
- },
- // 局部组件
- // 组件可以直接引入, 也可以通过通用 component 组件引入, 当 is 属性为特定组件名时, 渲染相应组件.
- template: `
- <div>
可以尝试输入 cmp1 或 my-dialog
- <input type="text" v-model="type" />
- <cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]" />
- <component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]" />
- </div>
- `
- })
实例化组件
组件还可以通过 new 关键字进行实例化, 实例化后的组件主要用于测试.
- // 实例化组件, 主要用于测试
- let cmp=new Cmp1({
- propsData: {
- name: '张三',
- list: [88, 99, 27]
- }
- });
- // 生成虚拟 vm 对象
- let vm=cmp.$mount();
- // vm.$el 中存储了 DOM, 但不渲染在页面中
- console.log(vm.$el);
- // 测试代码
- if(vm.$el.querySelector('li').innerhtml=='88'){
- console.log('正确');
- }else{
- console.log('失败');
- }
组件插槽
我们可以在模板中使用 < slot /> 标记一个默认插槽位置, 使用 < slot name="title"/> 标记一个具名插槽位置.
在使用组件时, 组件标签 < my-dialog></my-dialog > 内部的内容都为插槽内容. 其中带有相应 name 属性的内容会被插入到 < slot name="title"/> 插槽的位置, 其余内容会插入到默认插槽.
示例代码:/lesson15/src/my-dialog.JS
- import Vue from 'vue/dist/vue.esm';
- import 'bootstrap/dist/CSS/bootstrap.css';
- import './css/my-dialog.css';
- export default Vue.component('my-dialog', {
- data(){
- return {};
- },
- template: `
- <div class="panel panel-default my-dialog">
- <div class="panel-heading">
- <slot name="title"/>
- </div>
- <div class="panel-body">
- <slot />
- </div>
- </div>
- `
- });
示例代码:/lesson15/src/vm.JS
- import Vue from 'vue/dist/vue.esm';
- import Cmp1 from './cmp1';
- import MyDialog from './my-dialog';
- let vm=new Vue({
- el: '#div1',
- data: {
- type: 'cmp1'
- },
- // 局部组件
- // 组件可以直接引入, 也可以通过通用 component 组件引入, 当 is 属性为特定组件名时, 渲染相应组件.
- template: `
- <div>
可以尝试输入 cmp1 或 my-dialog
- <input type="text" v-model="type" />
- <cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]" />
- <component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]" />
- <my-dialog>
- <!-- 名为 title 的插槽内容 -->
- <template slot="title"> 标题 </template>
一些文字文字文字
- <!-- 默认插槽内容 -->
- <ul>
- <li>asdfas</li>
- <li>asdfas</li>
- </ul>
- </my-dialog>
- </div>
- `
- })
来源: https://juejin.im/post/5c17bb446fb9a049f1541e36