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

    目录

    一、ref属性

    二、props配置

    传递数据：

    接收数据：

        第一种方式：只接收

        第二种方式：限制类型

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

    案例

     三、mixin混入

          局部混合

     

          全局混合

    四、plugins.js插件

    五、scoped样式（scoped 局部的）

    一、ref属性

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

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

       3.使用方式：

             打标识：

    ....

       或

                          

                   获取：this.$refs.xxx

    具体看下图代码

     

    二、props配置

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

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

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

    传递数据：

       <demo name="xxx">

    接收数据：

        第一种方式：只接收

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

        第二种方式：限制类型

    1.  props:{
    2.                name: String,
    3.                age:Number,
    4.                sex:String
    5.              }

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

    1.             props:{
    2.                 name:{
    3.                     type:String,
    4.                     // 必须传入值
    5.                     required:true
    6.                 },
    7.                 age:{
    8.                     type:Number,
    9.                     // 如果不传入值的话，会有一个默认值
    10.                     default:99
    11.                 },
    12.                 sex:{
    13.                     type:String,
    14.                     required:true
    15.                 }
    16.             }

    案例

        student.vue

    1.  
    2. <template>
    4.      
    5.      <div class="demo">
    6.         <h2> 学生名称：{{name}}h2>
    7.         <h2> 学生年龄：{{age}}h2>
    8.         <h2> 学生性别：{{sex}}h2>
    9.         <button @click="showName">点我提示学生名button>
    10.      div>
    11. template>
    12.  
    13.  <script>
    14.         export default {
    15.             name:'Student',
    16.             data(){
    17.                 
    18.                 return{
    19.                 //  name:'张三',
    20.                 //  sex:'男',
    21.                 //  age:18
    22.  
    23.                 //this.name是外部传进来的   this在这里值得vc
    24.                 // 这样也说明了props的优先级更高，要不然这里不能调用 
    25.                 MyName:this.name
    26.                 }
    27.             },
    28.             methods: {
    29.                 showName(){
    30.                     alert(this.name)
    31.                 }
    32.             },
    33.             // 顺序不一定要对上
    34.             // 接收外部传入数据
    35.             // props:['name','sex','age']    //最简单的写法，但是不能限制传进来的数据
    36.  
    37.             // 接收的同时对数据进行类型限制
    38.             // props:{
    39.             //     name: String,
    40.             //     age:Number,
    41.             //     sex:String
    42.             // }
    43.  
    44.             // 接收的同时对数据进行类型限制+默认值的指定+必要性的限制
    45.             props:{
    46.                 name:{
    47.                     type:String,
    48.                     // 必须传入值
    49.                     required:true
    50.                 },
    51.                 age:{
    52.                     type:Number,
    53.                     // 如果不传入值的话，会有一个默认值
    54.                     default:99
    55.                 },
    56.                 sex:{
    57.                     type:String,
    58.                     required:true
    59.                 }
    60.             }
    61.         }  
    62. script>
    63.  
    64. <style>
    65.      /* 组件的样式 */
    66.     .demo{
    67.         background-color:orange
    68.      }
    69.  
    70. style>
    71.  
    72.  
    73.  
    74.  
    75.  
    76.

    app.vue

    1.  
    2. <template>
    3.   <div>
    4.     
    5.     <Student name="李四" sex="女" :age="18">Student>
    6.   div>
    7.  
    8. template>
    9.  
    10. <script>
    11. // 引入组件
    12.  
    13.      import Student from './components/Student'
    14.  
    15.      export default {
    16.        name:'App',
    17.       //  注册组件
    18.        components:{
    19.          Student
    20.        }
    21.       }
    22. script>
    23.  
    24. <style>
    25.  
    26. style>

     三、mixin混入

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

     混合说白了就是共用配置

     

     

          局部混合

      student.vue

    1.  
    2. <template>
    4.      
    5.      <div class="demo">
    6.         <h2  @click="showName"> 学生名称：{{name}}h2>
    7.         <h2> 学生年龄：{{age}}h2>
    8.         <h2> 学生性别：{{sex}}h2>
    9.       
    10.      div>
    11. template>
    12.  
    13.  <script>
    14.         //引入一个混合  花括号中的名字是我们在minin中定义的
    15.         import {mixin} from '../mixin'
    16.  
    17.         export default {
    18.             name:'Student',
    19.  
    20.             data(){
    21.                 return{
    22.                  name:'张三',
    23.                  sex:'男',
    24.                  age:18
    25.                 }
    26.             },
    27.  
    28.             // methods: {
    29.             //     showName(){
    30.             //         alert(this.name)
    31.             //     }
    32.             // },
    33.           mixins:[mixin]
    34.         }  
    35. script>
    36.  
    37. <style>
    38.      /* 组件的样式 */
    39.     .demo{
    40.         background-color:orange
    41.      }
    42.  
    43. style>
    44.  
    45.  
    46.  
    47.

    School.vue

    1.  
    2. <template>
    4.      
    5.      <div class="demo">
    6.         <h2 @click="showName"> 学校名称：{{name}}h2>
    7.         <h2> 学校地址：{{address}}h2>
    8.         
    9.      div>
    10. template>
    11.  
    12.  <script>
    13.         //引入一个混合  花括号中的名字是我们在minin中定义的
    14.         import {mixin} from '../mixin'
    15.  
    16.         export default {
    17.             name:'School',
    18.             data(){
    19.                 return{
    20.                  name:'尚硅谷',
    21.                  address:'北京昌平',
    22.                 }
    23.             },
    24.             // 我们不再使用这种方式，我们使用混合
    25.             // methods: {
    26.             //     showName(){
    27.             //         alert(this.name)
    28.             //     }
    29.             // },
    30.             mixins:[mixin]
    31.  
    32.             
    33.         }
    34. script>
    35.  
    36. <style>
    37.      /* 组件的样式 */
    38.     .demo{
    39.         background-color:orange
    40.      }
    41.  
    42. style>

    App.vue

    1.  
    2. <template>
    3.   <div>
    4.     <school>school>
    5.     <Student >Student>
    6.   div>
    7.  
    8. template>
    9.  
    10. <script>
    11. // 引入组件
    12.  
    13.      import Student from './components/Student'
    14.      import School  from './components/School' 
    15.  
    16.  
    17.      export default {
    18.        name:'App',
    19.       //  注册组件
    20.        components:{
    21.          Student,
    22.          School
    23.        }
    24.       }
    25. script>
    26.  
    27. <style>
    28.  
    29. style>

       

    1. export const mixin={
    2.     methods:{
    3.         showName(){
    4.             alert(this.name)
    5.         }
    6.     }
    7. }

     

     

      全局混合

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

    1. // 该文件是整个项目的入口文件
    2.  
    3. // 引入vue，这个vue不能解析template配置项
    4. import Vue from 'vue'
    5. // 下面这个是引入完整版的vue。这个vue能解析template配置项
    6. // import Vue from 'vue/dis/vue'
    7.  
    8. // 引入APP组件，它是所有组件的父组件
    9. import App from './App.vue'
    10.  
    11. // 引入混合
    12. import {mixin} from './mixin'
    13. Vue.mixin(mixin)   //这样一来所有的vc和vm都会得到这个混合
    14. // Vue.mixin(mixin2)  有几个，就写一个这样的语句
    15.  
    16. // 关闭vue的生产提示
    17. Vue.config.productionTip = false
    18.  
    19. // 创建vue实例对象---vm
    20. new Vue({
    21.   el:'#app',
    22.   render: h => h(App),
    23. })

    四、plugins.js插件

       功能：增强Vue

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

       定义插件：

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

            全局过滤器

            全局指令

            配置全局混入

            添加实例方法

     

          }

    使用插件：Vue.use()

     编写插件

     

    引入插件

     

    调用插件

     

     

    五、scoped样式（scoped 局部的）

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

     写法：