Vue学习周报1

ref属性

<template>
  <div>
    <h1 v-text="msg"  ref="title"></h1>
    <button @click="showDOM" ref="btn">点我输出上ref</button>
    <School ref="sch"/>
  </div>
</template>

<script>
  import School from './components/School.vue'
  export default{
    name:'App',
    components:{School},
    data() {
      return {
        msg:'欢迎来到深技大!'
      }
    },
    methods: {
      showDOM(){
       console.log(this.$refs.title);//真实DOM元素
       console.log(this.$refs.btn);//真实DOM元素
       console.log(this.$refs.sch);//School组件的实例对象
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>

效果：

总结

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

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

3. 使用方法：

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

   获取：this.$refs.xxx

props配置项

App.vue

<template>
 <div>
   <Student name="李四"  sex="男" :age="18" />
 </div>
</template>

<script>
  import Student from './components/Student.vue'
 export default{
   name:'App',
   components:{Student},
 }
</script>

<style lang="scss" scoped>

</style>

Student.vue

<template>
   <div class="school">
       <h2>{{ msg }}</h2>
       <h3>学生姓名:{{ name }}</h3>
       <h3>学生性别:{{ sex}}</h3>
       <h3>学生年龄:{{ myAge+1 }}</h3>
       <button @click="updateage">尝试修改收到的年龄</button>
   </div>
</template>

<script>
   export default {
       name:'Student',
       data(){
           return{
               msg:'我是一名深技大的学生',
               myAge:this.age
           }
       },
       methods:{
           updateage(){
               this.myAge++//直接修改age会警告报错 不好
           }
       },
       props:['name','sex','age'],//简单声明接收
       // 接收的同时对数据进行类型限制
   	/* props:{
   		name:String,
   		age:Number,
   		sex:String
   	} */
       //接受的同时对数据进行类型限制+默认值的指定+必要性的限制
       props:{
           name:{
               type:String,//name的类型是字符串
               required:true//名字是必要的
           },
           age:{
               type:Number,
               default:99//可传可不传，默认值99
           },
           sex:{
               type:String,
               required:true
           }
       }
   }
</script>

<style>
   .school{
       width:400px;
       margin:0 auto;
       color:#fff;
       background: rgba(53, 180, 146, 0.879);
   }
</style>

效果：

总结
功能：让组件接受外部传过来的数据
（1）传递数据：
<Demo name="xxx">xxx是字符串
<:Demo name="xxx">xxx是表达式
（2）接收数据：
第一种方法（只接受）：
props:['name']
第二种方法（限制类型）：
props:{name:String}
第三种方法

props:{
    name:{
    	type:String, //类型
        required:true, //必要性
        default:'JOJO' //默认值
    }
}

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

mixin配置项

局部混入
mixin.js

export const a={
    methods:{
        showName(){
        alert(this.name)
        }
    },
    mounted(){
        console.log('hello');
    },
}

School.vue

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

<script>
    //引用一个混合
    import {a} from '../components/mixin'
    export default {
        name:'Student',
        data(){
            return{
               name:'深技大',
               address:'深圳'
            }
        },
        mixins:[a]
    }
</script>

Student.vue

<template>
    <div class="school">
        <h3 @click="showName">学生姓名:{{ name }}</h3>
        <h3>学生性别:{{sex}}</h3>
    </div>
</template>

<script>
    import {a} from '../components/mixin'
    export default {
        name:'Student',
        data(){
            return{
               name:'张三',
               sex:'男'
            }
        },
        mixins:[a]
    }
</script>

App.vue

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

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'

    export default {
        name:'App',
        components: { Student,School },
    }
</script>

效果

全局混入
main.js

import Vue from 'vue'
import App from './App.vue'
import {mixin} from './mixin'

Vue.config.productionTip = false
Vue.mixin(a)

new Vue({
    el:"#app",
    render: h => h(App)
})

效果

总结
mixin（混入）
功能：可以把多个组件公用的配置提取成一个混入对象
使用方法：

1. 定义混合

const mixin = {
    data(){....},
    methods:{....}
}

2. 使用混合：
   1.全局混入：Vue.mixin(xxx)
   2 局部混入：mixins:['xxx']