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

1、ref属性

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

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

  3. 使用方式：
    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配置项

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

  2. 传递数据：<Demo name="xxx"/>

  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

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

  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

<template>
    <div>
        <h3 >学校名称：{{name}}</h3>
        <h3>地址：{{address}}</h3>
        <button @click="test">点我提示信息</button><br/>

        <!-- v-fbind是插件里定义的指令，可以直接使用v-fbind不绑定属性和传值 -->
        <input type="text" v-fbind:value="name" >

    </div>
    
</template>

<script>    

    export default  {
        name:"School",
        data(){
            return{
                name:"家里蹲",
                address:"某国",
            }
        },
        methods:{
            test(){
                this.hello();//hello是插件里定义的
            }
        }
    };

</script>

5、scoped样式

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

  2. 写法：<style scoped>

posted @   青仙  阅读(74)  评论(0)  编辑  收藏  举报
相关博文：
· vue2_13、组件化编程
· vue2_1、vue简介
· Vue学习计划-Vue2--VueCLi（三）ref属性、mixins混入、插件、scoped样式
· Vue2.x 基本认识二：使用 Vue CLI 的 Vue 项目
· Vue学习之Vue-CLI篇（1）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛