Vue-ref属性（脚手架获取DOM元素）、props配置、mixin混入、插件、scoped样式

ゝ一世哀愁。 2024-04-07 14:28 49阅读 0赞

**目录**

一、ref属性

二、props配置

传递数据：

接收数据：

第一种方式：只接收

第二种方式：限制类型

第三种方式：限制类型+限制必要性+指定默认值

案例

三、mixin混入

局部混合

全局混合

四、plugins.js插件

五、scoped样式（scoped 局部的）

--------------------

## 一、ref属性 ##

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

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

3.使用方式：

打标识：<h1 ref="xxx"> ....</h1> 或

获取：this.$refs.xxx

具体看下图代码

![ae0d3059eea74e9cac99c2672084f513.png][]

## 二、props配置 ##

功能：让组件接受外部传过来的数据

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，

若业务需求确实需要修改，name请复制props的内容到data中一份，然后去修改data中的数据，具体做法查看下面的案例

### 传递数据： ###

### 接收数据： ###

#### 第一种方式：只接收 ####

props:['name','sex','age']

#### 第二种方式：限制类型 ####

props:{
                   name: String,
                   age:Number,
                   sex:String
                 }

#### 第三种方式：限制类型+限制必要性+指定默认值 ####

props:{
                    name:{
                        type:String,
                        // 必须传入值
                        required:true
                    },
                    age:{
                        type:Number,
                        // 如果不传入值的话，会有一个默认值
                        default:99
                    },
                    sex:{
                        type:String,
                        required:true
                    }
                }

### 案例 ###

student.vue

<template>
    
         
         <div class="demo">
            <h2> 学生名称：{
       {name}}</h2>
            <h2> 学生年龄：{
       {age}}</h2>
            <h2> 学生性别：{
       {sex}}</h2>
            <button @click="showName">点我提示学生名</button>
         </div>
    </template>
    
     <script>
            export default {
                name:'Student',
                data(){
                    
                    return{
                    //  name:'张三',
                    //  sex:'男',
                    //  age:18
    
                    //this.name是外部传进来的   this在这里值得vc
                    // 这样也说明了props的优先级更高，要不然这里不能调用 
                    MyName:this.name
                    }
                },
                methods: {
                    showName(){
                        alert(this.name)
                    }
                },
                // 顺序不一定要对上
                // 接收外部传入数据
                // props:['name','sex','age']    //最简单的写法，但是不能限制传进来的数据
    
                // 接收的同时对数据进行类型限制
                // props:{
                //     name: String,
                //     age:Number,
                //     sex:String
                // }
    
                // 接收的同时对数据进行类型限制+默认值的指定+必要性的限制
                props:{
                    name:{
                        type:String,
                        // 必须传入值
                        required:true
                    },
                    age:{
                        type:Number,
                        // 如果不传入值的话，会有一个默认值
                        default:99
                    },
                    sex:{
                        type:String,
                        required:true
                    }
                }
            }  
    </script>
    
    <style>
         /* 组件的样式 */
        .demo{
            background-color:orange
         }
     
    </style>

app.vue

<template>
      <div>
        
        <Student name="李四" sex="女" :age="18"></Student>
      </div>
    
    </template>
    
    <script>
    // 引入组件
    
         import Student from './components/Student'
    
         export default {
           name:'App',
          //  注册组件
           components:{
             Student
           }
          }
    </script>
    
    <style>
    
    </style>

## ![1c0386b9c7e94fec8b311e9b63f0ac03.png][] ##

##  ##

## 三、mixin混入 ##

两个组件共享一个配置，并且这个配置要一个样

混合说白了就是共用配置

![1a945745b88c41fd89db4e0f35fa9573.png][]

![c0cbec8ca5b74e1b930bd763116a2d5f.png][]

### 局部混合 ###

student.vue

<template>
    
         
         <div class="demo">
            <h2  @click="showName"> 学生名称：{
       {name}}</h2>
            <h2> 学生年龄：{
       {age}}</h2>
            <h2> 学生性别：{
       {sex}}</h2>
          
         </div>
    </template>
    
     <script>
            //引入一个混合  花括号中的名字是我们在minin中定义的
            import {mixin} from '../mixin'
    
            export default {
                name:'Student',
    
                data(){
                    return{
                     name:'张三',
                     sex:'男',
                     age:18
                    }
                },
    
                // methods: {
                //     showName(){
                //         alert(this.name)
                //     }
                // },
              mixins:[mixin]
            }  
    </script>
    
    <style>
         /* 组件的样式 */
        .demo{
            background-color:orange
         }
     
    </style>

School.vue

<template>
    
         
         <div class="demo">
            <h2 @click="showName"> 学校名称：{
       {name}}</h2>
            <h2> 学校地址：{
       {address}}</h2>
            
         </div>
    </template>
    
     <script>
            //引入一个混合  花括号中的名字是我们在minin中定义的
            import {mixin} from '../mixin'
    
            export default {
                name:'School',
                data(){
                    return{
                     name:'尚硅谷',
                     address:'北京昌平',
                    }
                },
                // 我们不再使用这种方式，我们使用混合
                // methods: {
                //     showName(){
                //         alert(this.name)
                //     }
                // },
                mixins:[mixin]
    
                
            }
    </script>
    
    <style>
         /* 组件的样式 */
        .demo{
            background-color:orange
         }
     
    </style>

App.vue

<template>
      <div>
        <school></school>
        <Student ></Student>
      </div>
    
    </template>
    
    <script>
    // 引入组件
    
         import Student from './components/Student'
         import School  from './components/School' 
    
    
         export default {
           name:'App',
          //  注册组件
           components:{
             Student,
             School
           }
          }
    </script>
    
    <style>
    
    </style>

###  ###

export const mixin={
        methods:{
            showName(){
                alert(this.name)
            }
        }
    }

### ![636bca6878224dd7b6446d6f04b3f7dc.png][] ###

![b486ae8579be4bd3975f5814e4f23a03.png][]

### 全局混合 ###

将上面的局部删掉，保留mixin.js文件

// 该文件是整个项目的入口文件
    
    // 引入vue，这个vue不能解析template配置项
    import Vue from 'vue'
    // 下面这个是引入完整版的vue。这个vue能解析template配置项
    // import Vue from 'vue/dis/vue'
    
    // 引入APP组件，它是所有组件的父组件
    import App from './App.vue'
    
    // 引入混合
    import {mixin} from './mixin'
    Vue.mixin(mixin)   //这样一来所有的vc和vm都会得到这个混合
    // Vue.mixin(mixin2)  有几个，就写一个这样的语句
     
    // 关闭vue的生产提示
    Vue.config.productionTip = false
    
    // 创建vue实例对象---vm
    new Vue({
      el:'#app',
      render: h => h(App),
    })

## 四、plugins.js插件 ##

功能：增强Vue

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

![0207bbb02b774337b366bab8cb197d36.png][]

定义插件：

对象.install = function(Vue,options)\{

全局过滤器

全局指令

配置全局混入

添加实例方法

![a4459dae5a4248c69de835832ae254fc.png][]

使用插件：Vue.use()

编写插件

![43a7a547811448f7aa2d153d61ef7ab2.png][]

引入插件

![7db0419c11fb4552bdc746953b35638e.png][]

调用插件

![dc99f91afa08442988de9418fc100216.png][]

![3483312e82884622a5ef4d047d748098.png][]

## 五、scoped样式（scoped 局部的） ##

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

写法：<style scoped>

[ae0d3059eea74e9cac99c2672084f513.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/600001062fab42aba65a89f8048486fc.png
[1c0386b9c7e94fec8b311e9b63f0ac03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/29762c5054aa435188af335c7daf20db.png
[1a945745b88c41fd89db4e0f35fa9573.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8311784da6e145b1bf60dd3a2f229fa5.png
[c0cbec8ca5b74e1b930bd763116a2d5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2218b77b840c4664bf9573809de2534b.png
[636bca6878224dd7b6446d6f04b3f7dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/89be87272338482f8a89f75573b89fcc.png
[b486ae8579be4bd3975f5814e4f23a03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/453a10c1962a45f2a2a9cb631ab625ad.png
[0207bbb02b774337b366bab8cb197d36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a7779dc001ec4fbeb52d78cb0135078e.png
[a4459dae5a4248c69de835832ae254fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3333587ec64d42288ce5d19d411d0429.png
[43a7a547811448f7aa2d153d61ef7ab2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0b797a0786044a9185194eb1f6b890c9.png
[7db0419c11fb4552bdc746953b35638e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a482968e2ee0477ca3a8bd02826324f0.png
[dc99f91afa08442988de9418fc100216.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7d5ef41908274090ad3624b663bb3b66.png
[3483312e82884622a5ef4d047d748098.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/98a83655013e4542ab5f3036138f43b0.png