VueCLI核心知识1：ref属性、props配置、mixin混入

news2025/1/18 17:01:59

1 ref 属性

ref属性类似于js原生获取DOM元素

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

<script>
    import School from './components/Schoool'
    export default {
        name:'App',
        components:{School},
        data(){
            return{
                msg:'欢迎学习Vue'
            }
        },
        methods: {
            showDom() {
                console.log(this.$refs.title)  // 获取导的真实Dom元素
                console.log(this.$refs.sch)  // School组件的实例对象（vc）
                console.log(this.$refs) 
            }
        },
        
    }
</script>

<style>

</style>

总结：

2 props 配置

2.1 实现父组件向子组件传递信息

1. App组件向Student传递信息

2. Student组件接收，就可以直接使用了。接收方式有3种

<template>
  <div class="student">
    <h1>{{msg}}</h1>
    <h2>学生姓名： {{ name }}</h2>
    <h2>学生年龄： {{ age + 1 }}</h2>
    <h2>学生性别： {{ gender }}</h2>
  </div>
</template>

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

        // 2.接收的同时对数据进行类型限制
        // props:{
        //     name:String,
        //     age:Number,
        //     gender:String
        // },

        // 3.接收的同时对数据进行类型限制，再加上必要性的限制
        // props: {
        //     name: {
        //         type: String,
        //         required: true,  //  name 是必要的
        //     },
        //     age: {
        //         type: Number,
        //         default: 18  // 默认值
        //     },
        //     gender: {
        //         type: String,
        //         default: '男'
        //     }
        // }
    }
</script>

<style>
    .student {
        color: red;
    }
</style>