1.Vue脚手架中的ref属性

作用:

1. 被用来给元素或子组件注册引用信息（id的替代者）
1. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
1. 使用方式：
- 1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
- 2. 获取：this.$refs.xxx

代码展示:

<template>
    <div>
        <!-- 在Vue脚手架的环境下可以使用标签的简写 -->
        <h2 v-text="msg" ref="msg" id="msg"></h2>
        <button @click="btn" ref="btn">点我输出上方的DOM元素</button>
        <school ref="sch" />
    </div>
</template>

<script>
    // 引入school组件
    import School from './components/School.vue'

    export default {
        components: { School },
        data() {
            return {
                msg : '你好! Vue!!'
            }
        },
        methods: {
            btn(){
                // 原始操作 dom 获取元素
                //同样可以输出,但是这样就操作了dom,与vue理论就背道而驰了
                // console.log(document.querySelector('#msg'));

                // 使用组件的ref属性
                console.log(this);// 这里的this是执行 App 的 vc
                console.log(this.$refs)//输出App下的所有 绑定 ref 属性的元素
                console.log(this.$refs.msg);//获取绑定了ref为msg属性的元素
                console.log(this.$refs.btn);//获取绑定了ref为btn属性的元素
                console.log(this.$refs.sch);//获取绑定了ref为sch属性的元素
            }
        },

    }
</script>

结果展示:

2.props配置

利用props配置项由父组件向子组件传值操作，实现数据的动态绑定,提高组件的代码复用性,步骤如下：

（1）在父组件中使用子组件的标签里面通过属性绑定向子组件传值，如下代码：

这里展示App中的数据中传递:

<template>
    <div>
        <!-- 这里配置接收的键名和键值,使用v-bind:(:)实现数据的动态绑定(数值类型) -->
        <Student name="李四" sex="女" :age="18"/>
    </div>
</template>

<script>
    // 引入子组件
    import Student from './components/Student'

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

（2）子组件通过props配置项接收，如下代码：

这里展示Student中的数据中接收:(三种接收方法)

<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <!-- 这里使用data中嵌套props中的属性实现间接修改props属性 -->
        <h2>学生年龄：{{myAge+1}}</h2>
        <button @click="updateAge">尝试修改收到的年龄(点击+1)</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            console.log(this)
            return {
                msg:'你好!! Vue!',
                // 这里设置一个变量用于接收props中的属性
                myAge:this.age
            }
        },
        methods: {
            updateAge(){
                this.myAge++
            }
        },
        //1.简单声明接收(只接受值)
        // props:['name','age','sex'] 

        //2.接收的同时对数据进行类型限制(接收值并且限制值的类型)
        /* props:{
            name:String,
            age:Number,
            sex:String
        } */

        //3.接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
        // (限制类型、限制必要性、指定默认值)
        props:{
            name:{
                type:String, //name的类型是字符串
                required:true, //name是必要的
            },
            age:{
                type:Number,
                default:99 //默认值(如果没有传入或者格式错误就显示)
            },
            sex:{
                type:String,
                required:true
            }
        }
    }
</script>

备注:

props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。(上述代码有实现过程)

结果展示:

3.混合(mixin)属性

作用:

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

使用场景:

多个组件身上均有相同的方法或者属性(data,methods…)的时候

代码展示:

mixin.js(提取出来)

// 将mixin暴露出去(混入)
export const hunhe = {
    // vm或者vc身上的共有的methods属性
    methods: {
        showName(){
            console.log(this.name);
        }
    },
    mounted() {
        console.log('你好啊！')
    },
}

// 将mixin暴露出去(混入)
export const hunhe2 = {
    // vm或者vc身上的共有的data属性
    data() {
        return {
            x:100,
            y:200
        }
    },
}

局部引入(在对应的组件身上引入即可)

例子:School组件(归于App管辖下的子组件)

<!-- School组件(局部引入mixin[混入]) -->
<template>
    <div>
        <h2 @click="showName">学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    //引入一个hunhe
    // import {hunhe,hunhe2} from '../mixin'

    export default {
        name:'School',
        data() {
            return {
                name:'五邑大学',
                address:'广东江门',
                x:666
            }
        },
        // 局部混入(mixin,只会在这个对象身上有这些属性和方法)
        // mixins:[hunhe,hunhe2],
    }
</script>

例子:Student组件(归于App管辖下的子组件)

<!-- Student组件(局部引入mixin[混入]) -->
<template>
    <div>
        <h2 @click="showName">学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
    </div>
</template>

<script>
    // import {hunhe,hunhe2} from '../mixin'

    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男'
            }
        },
        // 局部混入(mixin,只会在这个对象身上有这些属性和方法)
        // mixins:[hunhe,hunhe2]
    }
</script>

全局引入:(main.js)

// 在main.js中全局引入mixin(混入)

//引入Vue
import Vue from 'vue'

//引入App
import App from './App.vue'

// 引入mixin.js(混合)
import {hunhe,hunhe2} from './mixin'

//关闭Vue的生产提示
Vue.config.productionTip = false

// 全局混合,这样会使得全局的Vue实例化对象(vm以及所有的vc)身上都有这些属性和方法
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App)
})