vue第四周

1.ref属性

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

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button @click="showDom">点我输出上方的Dom元素</button>
        <school ref="sch"></school>
        <student></student>
    </div>
</template>

<script>
    // 引入组件
    import school from './components/school.vue'
    import student from './components/student.vue'
    export default {
        name:'app',
        data() {
            return {
                msg:'欢迎学习Vue!'
            }
        },
        components:{
            school,
            student
        },
        methods: {
            showDom(){
                console.log(this.$refs.title)//真实dom对象
                console.log(this.$refs.sch)//school组件的实例对象
            }
        }
    }
</script>

2.props

配置项props
功能：让组件接收外部传入过来的数据
（1）传递数据:
<demo name='xxx'>
(2)接收数据：
第一种方式（只接受）
props[‘name’]
第二种方式（限制类型）
props:{
name:String
}
第三种方式：（限制类型，限制必要性，指定默认值）
props:{
name:{
type:String,//类型
required:true//必要性
default:‘张三’//默认值
}
}
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业 务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据 -->

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{myAge+1}}</h2>
        <button @click="updateAge">尝试修改收到的年龄</button>
        <h2>性别：{{sex}}</h2>
    </div>
</template>
<script>
        export default {
            data(){
                return{
                    msg:'我是一个学生',
                    myAge:this.age
            }
            },
            // 简单声明接收
            // props:['name','age','sex'] 

            // 接收的同时对数据进行类型限制
            /* props:{
                name:String,
                age:Number,
                sex:String
            } */
            // 接收的同时对数据进行类型限制+默认值的指定+必要性的限制
            props:{
                name:{
                    type:String,    //name的类型是字符串
                    required:true,  //name是必要的
                },
                age:{
                    type:Number,
                    default:99  //默认值
                },
                sex:{
                    type:String,
                    required:true
                }
            },
            methods:{
                updateAge() {
                    this.myAge++
                },
            }
        }
</script>

3.mixin混入

mixin(混入)
功能：可以把多个组件共有的配置提取成一个混入对象
使用方法：
第一步：定义混入，例如
{
data(){…},
method(){…}
}
第二步：使用混入，例如：
（1）全局混入：Vue.mixin(xxx)
(2) 局部混入：mixins:[xxx]
备注：使用混入加入数据时，原有的数据不会改变

<--! 混合函数mixin.js -->
export const mixin = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
}
导出混合模块
export const hunhe2={
        data() {
            return {
                x:100,
                y:200
            }
        },
    } 

<!-- //student.vue组件 -->
<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2 @click="showName">学生姓名：{{name}}</h2>
        <h2>性别：{{sex}}</h2>
    </div>
</template>

<script>
// 局部混合
// import { mixin,hunhe2} from './mixin'
        export default {
            data(){
                return{
                    name:'张三',
                    sex:'male',
                    x:666
            }
            },
            // mixins:[mixin,hunhe2]
        }
</script>

4.plugins

插件
功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的值
定义插件：
对象.install=function(Vue,options){
1.添加全局过滤器
Vue.filter(…)
2.添加全局指令
Vue.directive(…)
3.配置全局混入
Vue.mixin(…)
4.添加实例方法
Vue.prototype.$mymethod=function()...Vue.prototype.$myProperty=xxxx
}
使用插件：Vue.use(插件文件名)

定义插件
import Vue from "vue"

export default {
    install(){
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        }),
        Vue.filter({
            data() {
                    return{
                        x:100,
                        y:200
                    }
            }
        })
}
}

<!-- //使用插件 -->
<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2 >学校名称：{{name|mySlice}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
        export default {
            data(){
                return{
                    name:'尚硅谷atgui',
                    address:'上海',
            }
            },
        }
</script>

<style>
    /* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>