Vue 基础-组件(第四章)

wiki

模块化

1. 非单文件组件

一个文件中有多个组件，分为3步

1. 创建组件

const cp1 = Vue.extend({
    template:"<div><h2>{{id}}</h2><h2>{{name}}/h2></div>",
    data():{// 必须使用函数式
        return {
            id:"",
            name:"" 
        }
    }
})

// 可以简写把 Vue.extend() 去掉，直接写对象
const cp1 = {
    template:"<div><h2>{{id}}</h2><h2>{{name}}/h2></div>",
    data():{// 必须使用函数式
        return {
            id:"",
            name:"" 
        }
    }
}

2. 注册组件

// 局部注册
new Vue({
    el:"#root",
    components:{
        user:cp1
    }
})

// 全局注册
Vue.component('user',cp1)

3. 使用

编写组件标签

<div>
    <user></user>
</div>

2. 单文件组件

1. 使用

有 3 种标签可以使用

• template : 组件结构
• script : 组件脚本
• style : 组件样式，可选多种属性，如 scoped 使样式局部生效

1. 导出和引入

// 默认导出
export default {...}

// 引入
import XXX from './XXX'

2. 文件结构

• App.vue : 主模板文件，引入其他组件
• index.html : 主容器文件
• main.js : 入口文件，并创建 Vue 实例
• xxx.vue : 其他组件文件

3. render

使用脚手架构建的 Vue 实例时，其不会直接包含模板解析器，必须使用 render() 函数来调用它来解析

2. 脚手架

脚手架标准化开发工具，使用步骤

• 全局安装 : npm install -g @vue/cli
• 创建目录 : 切换到项目目录，创建项目 vue create 项目名
• 启动项目 : npm run serve

3. 几个组件有关的属性

1. ref

用来给元素或子组件注册引用信息，等同于 id 属性：

• 应用在子组件上时，获取的是子组件实例
• 应用在 html 标签上时，时真实 DOM 元素

使用

// 标记
<h1 ref="h"></h1>
// 获取
this.$ref.h

2. props

让组件获取外部传进来的数据

// 外部传递
<Hello name="xx" age="xx"/>

// 简单声明接收
props:['name','age']

// 数据类型限制
props:{
    'name':String,
    'age':Number
}

// 数据校验
props:{
    'name':{
        type:String,    // 限制类型
        required:true   // 必要
    },
    'age':{
        type:Number,
        dafault:18      // 默认值
    }
}

3. mixin

把多个组件共有的配置提取成一个混入对象

// 定义
export const xxx = {
    data() {...},
    methods: {...},
    ...
}

// 全局使用
Vue.mixin(xxx)
// 局部使用
mixin:['xxx']

4. 注意

用于增强 Vue，包含一个 install(vue) 函数的对象，函数第一个参数是 Vue，第二个及以后得参数是插件使用者传递的数据

// 定义插件
export default {
    install(vue, options) {
        // 可以用来全局过滤器
        vue.filter(...)
        // 可以添加全局指令
        vue.directive(...)
        // 可以配置全局混入
        vue.mixin(...)
        // 可以添加实例方法、属性
        vue.property.$myMethod = function() {...}
        vue.property.$myProperty = xxx
    }
}

// 使用插件
Vue.use(插件名)

5. 注意

1. 组件命名为多个单词，使用短横杠来命名或者驼峰命名，前者需要使用单引号，后者只能在脚手架中使用

   components:{
       'my-name':cp1,  // 使用 <my-name></my-name> 来加载组件
       // MyJob:cp2    // 只能在脚手架中使用 <MyJob></MyJob>
   }