vue CLI_ref、props、mixin、plugin、scoped

1、ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）

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

3. 使用方式：
   a. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
   b. 获取：this.$refs.xxx

<template>

    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button @click="shouName">点我输出上面的元素</button>
         <School ref="sch"></School>           
    </div>
    
</template>

<script>
    //引入School组件
    import School from "./components/School.vue";

    export default {
        name:"App",
        components:{School},
        data(){
            return{msg:"hello"}
        },
        methods:{
            shouName(event){
                console.log(this);//this是组件实例vc
                console.log(this.$refs.title);//输出h1元素
                console.log(this.$refs.sch);//输出school组件实例
            }
        }

    }

</script>

标签：School,vue,console,CLI,plugin,refs,元素,组件,log
来源： https://www.cnblogs.com/fhzmasl/p/16116346.html