0
点赞
收藏
分享

微信扫一扫

Vue脚手架③

小编 2022-08-05 阅读 232
vue.jsjavascript前端数据复用OpenStack云计算
加载失败


文章目录

  • ​​ref属性​​
  • ​​props配置​​

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发现：

Vue脚手架③_javascript

于是我们这样去获得：

<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>

结果：

Vue脚手架③_vue.js_02

以上我们都是在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>

结果：

Vue脚手架③_javascript_03


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

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

Vue脚手架③_复用_04

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

Vue脚手架③_复用_05


Vue脚手架③_javascript_06


Vue脚手架③_vue.js_07


此时我们达到的是对应组件完整的DOM结构


我们给组件标签加的id属性其实跑到了组件最外侧的根标签上：


Vue脚手架③_数据_08

总结：

  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>

结果：

Vue脚手架③_javascript_09

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

Vue脚手架③_javascript_10


Vue脚手架③_vue.js_11


或者我们这样：


Vue脚手架③_数据_12


Vue脚手架③_数据_13


那么怎么解决呢？有两种方法：


①类型转换


②数据绑定

如果使用类型转换

：


Vue脚手架③_vue.js_14


Vue脚手架③_数据_15

如果使用数据绑定

：


Vue脚手架③_前端_16


Vue脚手架③_数据_17


原理是：使用数据绑定的时候，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>

运行项目之后我们发现：

Vue脚手架③_vue.js_18

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

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

<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>

结果：

Vue脚手架③_vue.js_19


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

Vue脚手架③_vue.js_20

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

Vue脚手架③_javascript_21


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


Vue脚手架③_vue.js_22

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

Vue脚手架③_数据_23


Vue脚手架③_javascript_24


那如果我们想要修改怎么办呢？

我们可以利用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中的数据。


举报

相关推荐

Vue脚手架④

vue.jsjavascript前端配置项背景颜色虚拟化云计算

Vue脚手架

算法c语言c++背包问题分组背包问题

Vue脚手架②

vue.jsjavascript前端解析器html虚拟化云计算

Vue脚手架①

vue.jsnpm前端htmlico云平台云计算

Vue 脚手架

vuehtml解析器配置项JavaScript前端开发

vue-脚手架

vue.jswebpacknpm

Vue 脚手架创建

javascriptvue.js

vue脚手架搭建

前端框架vue.jsvue前端

Vue CLI脚手架

html依赖包css代码人生

vue脚手架基础

vue.jsjavascriptwebpack
0 条评论
加载失败