Vue脚手架③

ref属性

我们拿出一个App组件：

<template>
    <div>
        <h2>欢迎来到{
  {n}}</h2>
        <hr>
        <SchoolName></SchoolName>
        <StudentName></StudentName>

    </div>
</template>

<script>

        import SchoolName from "@/components/School";
        import StudentName from "@/components/Student";
        export default {
     
            components:{
     
                SchoolName,
                StudentName
            },
            data(){
     
                return {
     
                    n:'CSDN'
                }
            }

    }


</script>

<style>

</style>

现在我们如果想要拿到这个h2元素，我们的第一反应就是使用原生js，给h2标签取个id，然后使用getElementById这个方法把它拿到。但是这是Vue我们应该减少直接操作DOM的操作。

这个时候Vue给我们提供了一个属性ref，我们通过它给标签取一个名字：

<template>
    <div>
        <h2 ref="title" @click="getElement">欢迎来到{
  {n}}</h2>
        <hr>
        <SchoolName></SchoolName>
        <StudentName></StudentName>

    </div>
</template>

我们打印此时的组件实例对象vc发现：

于是我们这样去获得：

<script>

        import SchoolName from "@/components/School";
        import StudentName from "@/components/Student";
        export default {
     
            components:{
     
                SchoolName,
                StudentName
            },
            data(){
     
                return {
     
                    n:'CSDN'
                }
            },
            methods:{
     
                getElement(){
     
                    console.log(this.$refs.title)
                }
            }

    }


</script>

结果：

以上我们都是在html标签中去使用ref属性，如果我们在组件标签中去使用会怎么样呢？

<template>
    <div>
        <h2 ref="title" @click="getElement">欢迎来到{
  {n}}</h2>
        <hr>
        <SchoolName ref="school"></SchoolName>
        <StudentName></StudentName>

    </div>
</template>

<script>

        import SchoolName from "@/components/School";
        import StudentName from "@/components/Student";
        export default {
     
            components:{
     
                SchoolName,
                StudentName
            },
            data(){
     
                return {
     
                    n:'CSDN'
                }
            },
            methods:{
     
                getElement(){
     
                    console.log(this.$refs.school)
                }
            }

    }


</script>

结果：

我们用这种办法可以拿到组件的实例对象vc。

使用了ref属性的元素，都会挂载到相应组件的$refs属性上，例如对于上面的代码：

如果我们使用id的方法去获取组件会怎么样？



此时我们达到的是对应组件完整的DOM结构
我们给组件标签加的id属性其实跑到了组件最外侧的根标签上：

总结：

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

props配置

我们知道组件时可以复用的。如果我们在复用的时候想把其中的数据修改成自己的该怎么呢？如果全部自己重新去配置非常的麻烦，这个时候我们就可以借助props配置项。

加入我们现在有一个组件：

<template>
    <div>
        <h2 class="stu">学生名称:{
  {studentName}}</h2>
        <h2>学生年纪:{
  {studentAge}}</h2>
            
    </div>
</template>

<script>
    export default {
     
        name:'ZhouYou',
        data(){
     
            return {
     
                studentName:'张三',
                studentAge:18
            }
        }
    }

</script>

<style>
    .stu{
     
        background-color:red;
    }
</style>

我们在复用的时候想对其中的数据进行替换，那么我们可以这样：

<template>
    <div>
        <h2 class="stu">学生名称:{
  {studentName}}</h2>
        <h2>学生年纪:{
  {studentAge}}</h2>
            
    </div>
</template>

<script>
    export default {
     
        name:'MyStudent',
        props:['studentName','studentAge']
    }

</script>

<style>
    .stu{
     
        background-color:red;
    }
</style>

把要修改的数据从data里面拿掉，也就是说不在data里面写死，而是用的时候你指定是什么，他就是什么。

在App组件中：

<template>
    <div>
        <h2 ref="title" @click="getElement">欢迎来到{
  {n}}</h2>
        <hr>
        <SchoolName ref="school"></SchoolName>
        <StudentName studentName="张三" studentAge=18></StudentName>
        <StudentName studentName="李四" studentAge=19></StudentName>

    </div>
</template>

结果：

有一个注意点：
不管你标签中的属性写的是studentAge=18还是studentAge=‘‘18’’，其实它给我们传入的都是字符串，我们可以举两个例子：


或者我们这样：


那么怎么解决呢？有两种方法：
①类型转换
②数据绑定
如果使用类型转换：


如果使用数据绑定：


原理是：使用数据绑定的时候，Vue会将""中的代码当作表达式去执行。

我们前面使用的props后面跟一个数组的方式叫做简单声明接收，下面我们来介绍另一种方式，我们可以用它对数据进行类型限制：

<template>
    <div>
        <h2 class="stu">学生名称:{
  {studentName}}</h2>
        <h2>学生年纪:{
  {studentAge}}</h2>
            
    </div>
</template>

<script>
    export default {
     
        name:'MyStudent',
        // props:['studentName','studentAge']
        props:{
     
            studentName:String,
            studentAge:Number
        }
    }

</script>

<style>
    .stu{
     
        background-color:red;
    }
</style>

在App组件中：

<template>
    <div>
        <h2 ref="title" @click="getElement">欢迎来到{
  {n}}</h2>
        <hr>
        <SchoolName ref="school"></SchoolName>
        <StudentName studentName="张三" :studentAge="18+1"></StudentName>
        <StudentName studentName="李四" studentAge="19"></StudentName>

    </div>
</template>

运行项目之后我们发现：

他会提醒我们传入的数据类型与要求的不符合。

除了这两种我们还有一种接收方式：

<template>
    <div>
        <h2 class="stu">学生名称:{
  {studentName}}</h2>
        <h2>学生年纪:{
  {studentAge}}</h2>
            
    </div>
</template>

<script>
    export default {
     
        name:'MyStudent',
        // props:['studentName','studentAge']
        // props:{
     
        //     studentName:String,
        //     studentAge:Number
        // }
        props:{
     
            studentName:{
     
                required:true,
                type:String
            },
            studentAge:{
     
                type: Number,
                default:10
            }
        }
    }

</script>

<style>
    .stu{
     
        background-color:red;
    }
</style>

在这里我们可以对接收的每一个数据进行详细配置，常见的配置项有三个：

• type – 限制类型
• default – 在不是必须传入的数据时，默认的数据值
• required – 是否必须传入
• 一般default与required不会同时出现

在App组件中：

<template>
    <div>
        <h2 ref="title" >欢迎来到{
  {n}}</h2>
        <hr>
        <SchoolName ref="school"></SchoolName>
        <StudentName studentName="张三" :studentAge="18+1"></StudentName>
        <StudentName studentName="李四" ></StudentName>

    </div>
</template>

结果：

如果我们没有传入studentName，那么控制台时会报错提醒我们的：

使用props接收到的数据Vue也会直接帮你挂载到当前组件vc的身上。
例如：

我们可以在Vue的开发者工具上对props和普通数据进行区分：

注意：用props接收到的数据是不允许修改的！
例如：


那如果我们想要修改怎么办呢？
我们可以利用props接收到的数据优先级比data里的数据高的特性。

<template>
    <div>
        <h2 class="stu">学生名称:{
  {studentName}}</h2>
        <h2 @click="ha">学生年纪:{
  {changingAge}}</h2>
        <button @click="changeAge">点我修改学生年龄</button>
    </div>
</template>

<script>
    export default {
     
        name:'MyStudent',
        // props:['studentName','studentAge'],
        // props:{
     
        //     studentName:String,
        //     studentAge:Number
        // }
        props:{
     
            studentName:{
     
                required:true,
                type:String
            },
            studentAge:{
     
                type: Number,
                default:10
            }
        },
        methods:{
     
            ha(){
     
                console.log(this)
            },
            changeAge(){
     
                this.changingAge++
            }
        },
        data(){
     
            return {
     
                changingAge:this.studentAge
            }
        }
    }

</script>

<style>
    .stu{
     
        background-color:red;
    }
</style>

也就是初始值是接收到的并传递到data中去，我们修改的值其实是data上的

总结：

1. 功能：让组件接收外部传过来的数据

2. 传递数据：<Demo name="xxx"/>

3. 接收数据：

   1. 第一种方式（只接收）：props:['name']

   2. 第二种方式（限制类型）：props:{name:String}

   3. 第三种方式（限制类型、限制必要性、指定默认值）：

      props:{
             
      	name:{
             
      	type:String, //类型
      	required:true, //必要性
      	default:'老王' //默认值
      	}
      }
      

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

转载：https://blog.csdn.net/zyb18507175502/article/details/125346668