Vue笔记 组件通信:ref、props mixin scoped

ref属性

1、作用：用于给节点打标识（被用来给元素或者子组件注册引用信息，id的替代者）

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

3、使用方式：

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

读取方式：this.$refs.xxxxxx

props属性：让组件接收外部传过来的数据

父组件：传递数据

<template>
    <div>
      <Student name="李四" sex="女" :age="18"/>   //age前面加冒号是为了声明表达式
    </div>
</template>
 
<script>
    //引入组件
    import Student from './Student'     
 
 
    export default{
       name:'App',
       components:{
          Student
        }
      }
</script>
 

子组件： 接收数据

三种props的用法：

<template>
   <div class="demo">
     <h2>学生名称：{{name}}</h2>
     <h2>学生性别：{{sex}}</h2>
     <h2>学生年龄：{{age}}</h2>
   </div>
</template>
 
<script>
     export default{
       name:'Student',
       data(){
         return {
           msg:'我是一名学生',
        }
       },
       //1、简单接收
       props:['name','age','sex']    
       //2、接收的同时对类型进行限制
       props:{
         name:String,     
         sex:String,
         age:Number
        }
       //3、接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
       props:{
         name:{
            type:String,    //name 的类型是字符串
            required:true  //name是必要的
          },
         sex:{
            type:String,    /sex的类型是字符串
            required:true  //name是必要的
          },
         age:{
            type:Number,    //age的类型是数字
            default:82  //默认值
          }
        }
      }
</script>
 

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

mixin属性 （混入）

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

使用方式：

    第一步定义混合，例如：

     {

      data(){.....}

      methods:{.....}

}

    第二步使用混合，例如：

（1）全局混入：Vue.mixin(xxx)

（2）局部混入：mixins:['xxx']

scoped样式

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

写法：<style scoped>