Vue.js - $ref - $emit - props - 《编程学习笔记》

$refs 获取DOM元素
$emit 组件自定义事件
props 数据验证
- 实例

$refs 获取DOM元素

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

$emit 组件自定义事件
一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中：
```
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',回调)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符 <Demo @atguigu.once="test"/>

或$once方法 this.$refs.xxx.$once('atguigu',回调)

触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件(被绑的vc):
1. this.$off('atguigu') 解绑一个自定义事件
2. this.$off(['atguigu','demo']) 解绑多个自定义事件
3. this.$off() 解绑所有的自定义事件*
组件上也可以绑定原生DOM事件，需要使用native修饰符。
<Student @click.native="show"/>
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数（箭头函数没有this，于是vue会往上一层找找到vc实例当做this），否则this指向会出问题！

props 数据验证
功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
```

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

        data() {
            return {
                myAge:this.age
            }
        },
        methods: {
            updateAge(){
                this.myAge++
            }
        },
        //简单声明接收
        props:['age']

实例

<body>
    <div id="app">
        <father></father>
    </div>
    <!-- 父组件 -->
    <template id="father">
        <div>
            <h1>{{name}}</h1>
            <!-- son子组件 -->
            <son></son>
        </div>
    </template>
    <!-- 子组件 -->
    <template id="son">
        <div>父级数据:{{parentname}}</div>
    </template>
    <script type="text/javascript">
        Vue.component("father", {
            template: "#father",
            data: function() {
                return {
                    "name": "张三"
                }
            },
            components: {
                "son": {
                    props: {
                        "parentname": {
                            //type不对控制台会报错
                            type: [String, Number],
                            //<son></son> 未绑定parentname
                            default: "123",
                        }
                    },
                    template: "#son"
                }
            }
        });
        let app = new Vue({
            el: '#app',
        });
    </script>
</body>

$ref - $emit - props

$refs 获取DOM元素

$emit 组件自定义事件

props 数据验证

实例