携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天点击查看活动详情。

mixin 混入

功能：可以把多个组件共用的配置提取成一个混入对象使用方法：
1、定义混合。例：

export const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log("@你好")
    },
}

2、使用混合。例：

1、全局混入：
import {hunhe,mixin} from './mixin'
// 设置全局 混合
Vue.mixin(mixin)
Vue.mixin(hunhe)

2、局部混入：
// 引入一个混合
import { mixin, hunhe } from "../mixin";
// 设置混合
 mixins: [mixin, hunhe],

插件

用于增强 Vue 本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据

对象.install = function (Vue, options) {
    // 添加全局过滤器
    Vue.filter(...)

    // 2、添加全局指令
    Vue.directive(...)

    // 3、配置全局混合
    Vue.mixin(...)

    // 4、添加实例方法
    Vue.prototype.$myMethod = function(){...}
    Vue.prototype.$myProperty = xxx
}

使用插件： Vue.use()

scoped 样式穿透

作用：让样式在局部生效，不污染全局，防止冲突

<style scoped>
</style>
指定使用的语言：    <style lang=""></style>

组件化编码流程

1、实现静态组件：抽取组件，使用组件实现静态页面效果
2、展示动态数据：

①、数据的类型、名称是什么？
②、数据保存在哪个组件

3、交互 — 从绑定事件监听开始

<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了 Props -->
 <input type="checkbox" v-model="todo.done" />

总结

1、组件化编码流程：

拆分静态组件：组件要按照功能点拆分，命名不要与HTML元素冲突。
实现动态组件：考虑好数据的存放位置，数据是一个组件在用还是一些组件在用：
- 一个组件在用：存放在组件自身即可。
- 一些组件在用：放在他们共同的父组件上(状态提升)
实现交互：从绑定事件开始。

2、Props 适用于：

父组件 ===> 子组件通信
子组件 ===> 父组件通信 (要求父先给子一个函数)

3、使用 v-model 要切记： v-model 绑定的值不能是 Props 传过来的值，因为 Props 是不可以修改的！

4、Props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但不推荐这样做

Vue.js学习笔记(玖)

mixin 混入

插件

scoped 样式穿透

组件化编码流程

总结