vue CLI_ref、props、mixin混入、plugin插件、scoped样式

1、ref属性

  1. 被用来给元素或子组件注册引用信息（id的替代者）

  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

  3. 使用方式：
    a. 打标识：

    .....

    或
    b. 获取：this.$refs.xxx

2、props配置项

  1. 功能：让组件接收外部传过来的数据

  2. 传递数据：

  3. 接收数据：

    ①. 第一种方式（只接收）：props:['name']

    ②. 第二种方式（限制类型）：props:{name:String}

    ③. 第三种方式（限制类型、限制必要性、指定默认值）：

    props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}

    备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

props里的属性也会作为组件对象vc身上_props的属性的属性值，而且也会给里面的值配置setter和gtter，所以直接用传过来的键名即可在组件实例身上找到。

src\components\Student.vue

App父组件向该组件传参


3、mixin混入

1. 功能：可以把多个组件共用的配置提取成一个混入对象

2. 使用方式：

第一步定义混合：

{
    data(){....},
    methods:{....}
    ....
}

第二步使用混入：

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

备注：

1、组件和混入对象含有同名配置对象选项时，这些选项将以恰当的方式进行合并，在发生冲突时以组件对象优先。

2、同名生命周期钩子将合并作为一个数组，因此都将被调用，另外，混入对象的生命周期钩子将在组件自身钩子之前被调用。也就是，如果组件和混入对象都有mounted钩子，那么它们身上的mounted钩子都会被调用。

创建一个js文件(src\mixin.js)，用来存放混合的代码

export const hunhe={
    methods: {
        showName(){
            alert(this.name);
        }        
    }, 
    mounted() {
        console.log("生命周期的mounted钩子执行了");
    }       
}

export const hunhe2={
    data() {
        return {
            x:100,
            y:200
        }
    },   
}

组件School(src\components\School.vue)

Student组件和School差不多，就不写了。

src\App.vue

src\main.js

//该文件 是整个项目的入口文件

//引入Vue
import Vue from "vue";

//引入App
import App from "./App.vue";

//关闭Vue的生产提示
Vue.config.productionTip=false;

//引入混合
// import {hunhe,hunhe2} from "./mixin";

//全局配置混合
// Vue.mixin(hunhe);
// Vue.mixin(hunhe2);

//创建vm
new Vue({
    render: h=>h(App)
}).$mount("#app");

4、plugin插件

  1. 功能：用于增强Vue

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

  3. 定义插件：

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

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

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

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

  4. 使用插件：Vue.use()

练习：编写插件使用：

src\plugins.js

export default{
    install(Vue,x,y,z){
        console.log("插件调用了");
        console.log(x,y,z);

        //定义全局指令
        Vue.directive("fbind",{

            //指令与元素成功绑定时(一上来)调用
            bind(element,binding){
                element.value=binding.value;

            },
            //指令所在元素被插入页面时调用
            inserted(element,binding){
                element.focus();
            },
            //指令所在模板被重新解析时调用
            update(element,binding){
                element.value=binding.value;
                element.focus();
            }
        }); 

        //给Vue原型添加一个方法 (vm和vc就都能用了)
        Vue.prototype.hello=function(){
            alert("hello world!");
        }
    }
}

src\main.js

//该文件 是整个项目的入口文件

//引入Vue
import Vue from "vue";

//引入App
import App from "./App.vue";

//关闭Vue的生产提示
Vue.config.productionTip=false;

//引入插件
import plugins from "./plugins"

//使用插件
Vue.use(plugins,55,66,77);

//创建vm
new Vue({
    render: h=>h(App)
}).$mount("#app");

src\components\School.vue

5、scoped样式

  1. 作用：让样式在局部生效，防止冲突，因为在Vue里所有的样式最终都会汇总到App里面，所以有时候会有命名冲突。
    如图：如果引入的两个组件的样式里面的样式 名都有一个叫.demo的，那就会覆盖了。

  2. 写法：