vue3学习四

news/2025/2/9 5:11:24 标签: 学习, vue.js, javascript

七 标签ref属性

设置标签ref属性，类似于设置标签id。

普通标签

<template name="test4">
<p ref="title" id="title" @click="showinfo">VIEW4</p>
<View3/>

<script lang="ts" setup>
import { ref } from 'vue';
let title = ref();
function showinfo(){
    console.log("ref:"+title.value.innerHTML)
    console.log("id: "+document.getElementById("title").innerHTML)
}
</script>

 点击后输出

ref:VIEW4
id: VIEW4

不建议使用id，因为有id冲突的时候，根据加载顺序会选用先加载的。

使用ref不会有这种现象。

View4

<script lang="ts" setup>
import { ref } from 'vue';
import View3 from '@/components/View3.vue';
let title = ref();
function showinfo(){
    console.log("ref:"+title.value.innerHTML)
    console.log("id: "+document.getElementById("title").innerHTML)
}
</script>
<template name="test4">
<p ref="title" id="title" @click="showinfo">VIEW4</p>
<View3/>
</template>

 View3

<script lang="ts" setup>
import {ref,reactive,watch} from 'vue'

let title=ref();
function showinfo(){
    console.log("ref:"+title.value.innerHTML)
    console.log("id: "+document.getElementById("title").innerHTML)
}

</script>
<template>
    <p ref="title" id="title" @click="showinfo">VIEW3</p>
</template>

 点击VIEW4输出

ref:VIEW4
id: VIEW4

 点击VIEW3输出

ref:VIEW3
id: VIEW4

view4引入vew3，所以view4先加载，点击VIEW3时用id取数据则返回错误数据。

组件标签

和放到普通标签组件不同。

普通标签返回dom元素，组件返回实例。

实例中可获取的属性，根据子组件用defineExpose()方法暴露的内容。

View4

<script lang="ts" setup name="test4">
import { ref } from 'vue';
import View3 from '@/components/View3.vue';
let view4 = ref()
function showinfo2(){
    console.log(view4.value)
    console.log(view4.value.title.innerHTML)
}
</script>
<template>
<button @click="showinfo2">showinfo2</button>
<hr>
<View3 ref="view4"/>
</template>

 View3

<script lang="ts" setup>
import {ref,reactive,watch} from 'vue'

let title=ref();
function showinfo(){
    console.log("ref:"+title.value.innerHTML)
    console.log("id: "+document.getElementById("title").innerHTML)
}
defineExpose({title,title3:title})
</script>
<template>
    <p ref="title" id="title" @click="showinfo">VIEW3</p>
</template>

 输出内容

 defineExpose()暴露的内容中，默认使用变量名，也可以自定义变量名，比如title3:title。

defineExpose() 不用引入。

八 局部样式

style标签设置scoped防止样式冲突。

View4

<script lang="ts" setup>
import View3 from '@/components/View3.vue';
</script>
<template name="test4">
<p class="title">VIEW4</p>
<p class="title2">VIEW4</p>
<View3/>
</template>

<style scoped>
    .title{
        color: red;
    }
</style>
<style>
.title2{
    background-color:red;
    color: white;
}
</style>

 View3

<script lang="ts" setup>
</script>
<template>
    <p class="title">VIEW3</p>
    <p class="title2">VIEW3</p>
</template>
<style scoped>
.title{
    color: saddlebrown;
}
</style>
<style>
.title2{
    background-color:saddlebrown;
    color: white;
}
</style>

 实际效果

View4中设置的title2样式，影响到了View3中。

title样式对应的style设置了scoped，所以仅对于其定义的页面起作用。

九 TS接口&泛型&自定义类型

便于对象结构统一。

定义

文件: /src/types/index.ts

javascript">export interface Book {
    id:number,
    edition:number,
    name:string,
    author:string,
    publication_time:string,
    test?:string
}

// export type Books = Array<Book> 
export type Books = Book[]

 暴露变量：

  1. 默认暴露
  2. 分别暴露
  3. 统一暴露

代码中例子为分别暴露。

test?表示该属性非必填，即对象属性中不是必须包含。

使用

javascript">import {type Book,type Books} from '@/types'

加type表示引入接口，而不是变量。

使用类型定义普通数据

javascript">let book:Book={
    id:1,
    edition:2,
    name:"test1",
    author:"tedst1",
    publication_time:"2024-01-01",
    test:"test"
}

let book2:Book={
    id:"qq",//编译器报错
    edition:2,
    name:"test1",
    author:"tedst1",
    publication_time:"2024-01-01"
}

使用泛型定义响应式数据

javascript">let book3 = reactive<Book>({
    id:1,
    edition:2,
    name:"test1",
    author:"tedst1",
    publication_time:"2024-01-01"
});

当对象结构错误或属性值错误时会报错。

javascript">let books1:Array<Book> = [book,book2]//泛型
let books2:Books=[book,book2]

 定义数组，可以使用泛型，也可以使用引入定义好的数组类型。

十 props

父组件向子组件传值。

父组件定义传递的数据，子组件接收数据。

父组件

javascript"><script lang="ts" setup name="test4">
import { ref,reactive } from 'vue';
import View3 from '@/components/View3.vue';
import {type Book,type Books} from '@/types'
let book:Book={
    id:1,
    edition:2,
    name:"test1",
    author:"tedst1",
    publication_time:"2024-01-01",
    test:"test"
}

let book2:Book={
    id:"qq",
    edition:2,
    name:"test1",
    author:"tedst1",
    publication_time:"2024-01-01"
}
let books2:Books=[book,book2]
</script>

<template>
<View3 ref="view4" :books="books2" book="book"/>
</template>

子组件

无限制接收数据

javascript"><script lang="ts" setup>
import {ref,reactive,watch} from 'vue'
let getprops = defineProps(['books','book','test'])
console.log(getprops)
</script>

<template>
    <div>
        {
  
  {books}}
    </div>
</template>

输出内容

父组件传book属性没有绑定变量，所以传递的一个字符串。

父组件未传递test属性，所以接收数据为undefined。

有限制接收数据

javascript"><script lang="ts" setup>
import {ref,reactive,watch,withDefaults} from 'vue'
let getprops = withDefaults(defineProps<{books:Books,book:Book,test?:string}>(),{
    books:()=>[
    {
        id:3,
        edition:1,
        name:"test3",
        author:"tedst3",
        publication_time:"2024-10-01",
        test:"test"
    },
    {
        id:4,
        edition:2,
        name:"test3", 
        author:"tedst3",
        publication_time:"2024-10-02",
    }
    ],
    book:()=>{return {
            id:4,
            edition:2,
            name:"test3", 
            author:"tedst3",
            publication_time:"2024-10-02",
        }
    },
    test:()=>"empty"
})
console.log(getprops)
</script>
<template>
    <div>
        {
  
  {books}}
    </div>
</template>

限制books属性为Books类型，book属性为Book类型，test属性可不传。

每个属性都有默认值。

在使用 withDefaults 时，默认值为可变引用类型 (如数组或对象) 应该封装在函数中，以避免意外修改和外部副作用。

这样可以确保每个组件实例都获得默认值的自己的副本。

在使用默认值解构时，这不是必要的

 此时父组件再使用book="book"会报错，因为数据类型错误。

已下写法会报错

javascript">import { type Book,type Books} from "@/types"
let book1:Book ={
    id:3,
    edition:1,
    name:"test3",
    author:"tedst3",
    publication_time:"2024-10-01",
    test:"test"
}
let book2:Book ={
    id:4,
    edition:2,
    name:"test3", 
    author:"tedst3",
    publication_time:"2024-10-02",
}
let books1:Books=[book1,book2]
let getprops = withDefaults(defineProps<{books:Books,book:Book,test?:string}>(),{
    books:()=>books1,
    book:()=>book1,
    test:"empty"
})

let getprops1 = defineProps<{books:Books,book:Book,test?:string}>()
let getprops = withDefaults(defineProps<{books:Books,book:Book,test?:string}>(),{
    books:()=>books1,
    book:()=>book1,
    test:()=>"empty"
})

报错内容：

`defineProps()` in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options require initialization in the module scope, use a separate normal <script> to export the options instead. 

<script setup>中的‘ defineProps() ’不能引用本地声明的变量，因为它将被提升到setup（）函数之外。如果你的组件选项需要在模块作用域中初始化，那就使用单独的<script>来导出这些选项。

大概意思：定义的属性会被全局使用，所以不能使用已被定义的值，得在设置默认值时重新定义。

输出内容

 


http://www.niftyadmin.cn/n/5845521.html

相关文章

F - Building Roads S

F - Building Roads S

Description Farmer John had just acquired several new farms! He wants to connect the farms with roads so that he can travel from any farm to any other farm via a sequence of roads; roads already connect some of the farms. Each of the N (1 ≤ N ≤ 1,000) …
阅读更多...
UnityShader学习笔记——多种光源

UnityShader学习笔记——多种光源

——内容源自唐老狮的shader课程 目录 1.光源类型 2.判断光源类型 2.1.在哪判断 2.2.如何判断 3.光照衰减 3.1.基本概念 3.2.unity中的光照衰减 3.3.光源空间变换矩阵 4.点光源衰减计算 5.聚光灯衰减计算 5.1.聚光灯的cookie&#xff08;灯光遮罩&#xff09; 5.2.聚…
阅读更多...
MySql数据库SQL编写规范注意事项

MySql数据库SQL编写规范注意事项

MySQL数据库SQL编写规范对于提高代码可读性、增强代码维护性、优化查询性能、减少错误发生、促进标准化和团队协作以及提升开发效率等方面都具有重要意义。因此&#xff0c;在开发过程中应严格遵守SQL编写规范&#xff0c;以确保代码的质量和效率。 以下是 MySQL 数据库 SQL 编…
阅读更多...
golang命令大全12--命令速查表

golang命令大全12--命令速查表

至此&#xff0c;本系列博文已将golang的各种应用场景的命令都介绍了一遍&#xff0c;通过熟练使用这些命令&#xff0c;开发者可以更高效地开发、测试和维护Go项目&#xff0c;同时也能够更好地理解和学习Go语言的特性和最佳实践。因此&#xff0c;掌握Go命令行工具是成为一名…
阅读更多...
第十节-Sourcetree图形化使用git

第十节-Sourcetree图形化使用git

一、Sourcetree和Git介绍 1.1 Git 简介 Git 是一个分布式版本控制系统&#xff08;Version Control System, VCS&#xff09;&#xff0c;由 Linus Torvalds 于 2005 年创建&#xff0c;最初是为了管理 Linux 内核开发而设计的。Git 的主要功能是跟踪文件的变更&#xff0c;帮…
阅读更多...
微服务 day01 注册与发现 Nacos OpenFeign

微服务 day01 注册与发现 Nacos OpenFeign

目录 1.认识微服务&#xff1a; 单体架构&#xff1a; 微服务架构&#xff1a; 2.服务注册和发现 1.注册中心&#xff1a; 2.服务注册&#xff1a; 3.服务发现&#xff1a; 发现并调用服务&#xff1a; 方法1&#xff1a; 方法2&#xff1a; 方法3:OpenFeign OpenFeig…
阅读更多...
快速优雅解决webview_flutter不能Safari调试的问题

快速优雅解决webview_flutter不能Safari调试的问题

这个问题&#xff0c;网上一搜&#xff0c;又是让你去检索WKWebView&#xff0c;找到FWFWebViewHostApi.m文件&#xff0c;然后再改 iOS 的代码&#xff0c; 加一行 self.inspectable YES; 我们开发Flutter项目&#xff0c;尽量还是不要去改插件里的代码&#xff0c;好了不费…
阅读更多...
工厂模式+枚举类的json序列化+redisson的使用

工厂模式+枚举类的json序列化+redisson的使用

目录 这里分享以下工厂模式反射IoC容器多态的妙用 场景引入 环境准备 代码实现 1.设置枚举类来规定有哪些学习方式 2.设置作业的实体对象 3.获取学习方式的接口 4.进行学习的动作&#xff0c;有出题和搜题 5.使用小猿搜题这种学习方式进行的两种学习动作学习&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023