新玩家Vue笔记17

提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。

一、ref属性

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

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

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

    export default {
        name: 'App',
        components: {School},
        data() {
            return {
                msg: '欢迎学习Vue'
            }
        },
        methods: {
            showDOM() {
                console.log('@@', this.$refs.title)
                console.log('##', this.$refs.btn)
                console.log('$$', this.$refs.sch)
            }
        },
    }
</script>

<style>

</style>

 

二、props属性

主要功能是让组件接收外部传过来的数据 。

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

<script>
    export default {
        name: 'Student',
        data() {
            return {
                msg:'我是一个学生',
            }
        },
        props: ['name', 'age', 'sex'] // 简单接收


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

        // 接受的同时对数据：进行类型限制和默认值指定和必要性的限制
        // props: {
        //     name: {
        //         type: String,
        //         required: true
        //     },
        //     age: {
        //         type: Number,
        //         default: 99
        //     },
        //     sex: {
        //         type: String,
        //         required: true
        //     },
        // }
    }
</script>

<style>

</style>

<template>
    <div>
        <Student name = '小爱同学' :age = 18 sex = '男'></Student>
    </div>
</template>

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

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

<style>

</style>

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

        若业务需求需要修改，那么请复制props的内容到data中，然后去修改data中的数据。

三、mixin混入

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

第一步定义混合，创建mixin.js

export const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
}

 第二步使用混合

// 局部混入
<script>
    // 导入混入文件
    import {mixin} from '../mixin'
    export default {
        // 使用混入
        mixins: [mixin]
    }
</script>

// 全局混入
import Vue from 'vue'
import App from './App.vue'
import {mixin} from './mixin'

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

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

 四、插件

插件通常用来为 Vue 添加全局功能。通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成。插件是包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

export default {
    install(Vue) {
        // 定义专属插件
    }
}

// 使用插件
Vue.use(plugins)

 五、scoped 样式

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

        写法：<style scoped></style>