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

1、ref属性

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
a. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
b. 获取：this.$refs.xxx


<template>

    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button @click="shouName">点我输出上面的元素</button>
         <School ref="sch"></School>           
    </div>
    
</template>

<script>
    //引入School组件
    import School from "./components/School.vue";

    export default {
        name:"App",
        components:{School},
        data(){
            return{msg:"hello"}
        },
        methods:{
            shouName(event){
                console.log(this);//this是组件实例vc
                console.log(this.$refs.title);//输出h1元素
                console.log(this.$refs.sch);//输出school组件实例
            }
        }

    }

</script>

2、props配置项

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：

①. 第一种方式（只接收）：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

<template>
    <div class="Student">

        <h1>{{msg}}</h1>
        <h3>学生姓名：{{name}}</h3>
        <h3>性别：{{sex}}</h3>
        <h3>年龄：{{myAge+1}}</h3>
        <button @click="updateAge">修改收到的年龄</button>
    </div>

    
</template>

<script>

    export default  {
        name:"Student",
        data(){
            //console.log(this);
            return{
                msg:"我是一名学生",
                myAge:this.age,
            }
        },
        methods:{
            updateAge(){
                this.myAge++;
            }
        },
        //简单声明接收
        //props:['name','sex','age'],

        //接收的同时对数据进行类型限制
        // props:{
        //     "name":String,
        //     "sex":String,
        //     "age":Number
        // },

        //接收的同时对数据：进行类型限制 、默认值的指定、必要性的限制
        props:{//props配置项高于data，因执行该配置项再执行data
            name:{
                type:String,//限制name属性的类型必须是String
                required:true,//限制name属性是必传的
            },
            age:{
                type:Number,
                default:500,//默认值
            },
            sex:{
                type:String,
                required:true,
            },
        }

    };

</script>

App父组件向该组件传参
<Student name="张三" sex="女" v-bind:age="18" />

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)

<template>
    <div>
        <h3 @click="showName">学校名称：{{name}}</h3>
        <h3>地址：{{address}}</h3>
    </div>
    
</template>

<script>
    import {hunhe,hunhe2} from "../mixin.js";       

    export default  {
        name:"School",
        data(){
            return{
                name:"家里蹲",
                address:"某国",
                x:666
            }
        },
        mixins:[hunhe,hunhe2],
    };

</script>

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

src\App.vue

<template>

    <div>
        <School />
        <hr>           
        <Student />  
    </div>
    
</template>

<script>
    //引入School组件
    import Student from "./components/Student.vue";

    import School from "./components/School.vue";

    export default {
        name:"App",
        components:{
            Student,
            School
        },
    }

</script>

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插件

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

定义插件：

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

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

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

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

使用插件：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!");
        }
    }
}