使用vue脚手架（二）ref属性&props配置&mixin混入

1.ref属性

*被用来给元素或子组件注册引用信息

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

<template>
    <div>
        <!-- ref用来给元素或子组件注册引用信息 -->
        <h2 ref="title">{{msg}}</h2>
        <button v-on:click="showDom">点击输出上方dom</button>
        <button v-on:click="showDom2">点击输出下方元素</button>
        <school ref="title2"></school>
    </div>
</template>
<script>
    import school from './components/school'
    export default {
        name:"App",
        components:{
            school
        },
        data() {
            return {
                msg:"欢迎新同学"
            }
        },
        methods: {
            showDom(){
                console.log(this.$refs.title)
            },
            showDom2(){
                console.log(this.$refs.title2)
            }
        },
    }
</script>

2.props配置

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

*接收：

<template>
  <div>
      <h1>{{msg}}</h1>
      <h2>学生姓名：{{name}}</h2>
      <h2>学生年龄：{{age}}</h2>
      <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
export default {
    name:"Student",
    data() {
        return {
            msg:"我是一个学生"
        }
    },
    //props接收到的东西是不能更改的
    props:['name','sex','age']//简单接收

    // props:{
    //     name:String,
    //     age:Number,
    //     sex:String
    // }//接收的同时对数据进行类型限制

    // props:{
    //     name:{
    //         type:String,//类型
    //         required:true//必要的
    //     },
    //     age:{
    //         type:Number,
    //         default:23//默认值
    //     },
    //     sex:{
    //         type:String,
    //         required:true
    //     }
    // }//更多的限制
}
</script>

*传入：

<template>
  <Student name="张三" sex="女" :age='18'/>
</template>

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

}
</script>

3.mixin混入

*两个组件共享一个配置

1.写混入函数：

export const hunhe={
    methods: {
        showName(){
            alert(this.name)
        }
    }
}
export const num={
    data() {
        return {
            x:1,
            y:2
        }
    },
}

2.在main.js里引入混入：

import Vue from 'vue'
import App from './App.vue'
import {hunhe,num} from './mixin'
Vue.config.productionTip = false
Vue.mixin(hunhe,num)
new Vue({
    render: h => h(App),
  }).$mount('#app')

3.在组件中使用混入：

<template>
  <div>
      <h2 @click="showName">学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
  </div>
</template>

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