首页 > 其他分享 >057、Vue3+TypeScript基础,页面通讯之父页面使用$refs修改子页面暴露的成员

057、Vue3+TypeScript基础,页面通讯之父页面使用$refs修改子页面暴露的成员

时间:2024-08-24 16:38:26浏览次数:9  
标签:vue color refs TypeScript 10px import ref book 页面

01、main.js代码如下:

// 引入createApp用于创建Vue实例
import {createApp} from 'vue'
// 引入App.vue根组件
import App from './App.vue'

// 引入emitter用于全局事件总线
// import emitter from '@/utils/emitter'

const app = createApp(App);

// App.vue的根元素id为app
app.mount('#app')

02、App.vue代码如下:

<template>
  <div class="app">
    <h2 class="title">App.Vue</h2>
    <Father/>
  </div>
</template>

<script lang="ts" setup name="App">
import Father from "@/view/Father.vue";
</script>

<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

.nav-button {
  display: inline-block; /* 让链接显示为块级元素,以便应用宽度和高度 */
  padding: 10px 20px; /* 内边距 */
  margin: 0 5px; /* 外边距,用于按钮之间的间隔 */
  text-decoration: none; /* 移除下划线 */
  color: white; /* 文本颜色 */
  background-color: #007bff; /* 背景颜色 */
  border-radius: 5px; /* 边框圆角 */
  transition: background-color 0.3s; /* 平滑过渡效果 */
}

.nav-button:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

.nav-button.router-link-active {
  background-color: #28a745; /* 当前激活(路由匹配)时的背景颜色 */
}

.mai-content {
  /* 添加边框样式 */
  border: 2px solid #000; /* 边框宽度、样式和颜色 */
  border-radius: 5px; /* 可选:添加边框圆角 */
  padding: 20px; /* 可选:给内部内容添加一些内边距 */
  margin: 20px; /* 可选:给元素添加一些外边距,以便与其他元素隔开 */
}
</style>

03、Father.vue代码如下:

<template>
  <div class="mypage">
    <h3>我是父页面</h3>
    <h4>房产 {{ house }}</h4>
    <button @click="changeToy">修改Child1玩具</button>
    <button @click="changePC">修改Child2电脑</button>
    <button @click="changeAllChildBook($refs)">
      修改所有子页面数据
    </button><br><br>
    <child1 ref="c1"/><br><child2 ref="c2"/>
  </div>
</template>

<script lang="ts" name="Father" setup>
import {ref} from "vue";
import Child1 from "@/view/Child1.vue";
import Child2 from "@/view/Child2.vue";

//数据
let house = ref(4)
let c1 = ref()
let c2 = ref()

function changeToy() {
  c1.value.pc = '小米'
}
function changePC() {
  c2.value.toy = '手机'
}
function changeAllChildBook(refs: { [key: string]: any })
{
  console.log(refs)
  for (let key in refs) {
    //修改子页面数据
    refs[key].book += 1
  }
}
</script>
<style scoped>
.mypage {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>

04、Child1.vue代码如下:

<template>
  <div class="mypage">
    <h3>我是子页面1</h3>
    <h4>电脑:{{ pc }}</h4>
    <h4>书籍:{{ book }} 本</h4>
  </div>
</template>

<script lang="ts" name="Child1" setup>
import {ref} from "vue";
//数据
let pc = ref('华硕')
let book = ref(6)
//暴露pc, book这2个数据
defineExpose({pc, book})
</script>

<style scoped>
.mypage {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>

05、Child2.vue代码如下:

<template>
  <div class="mypage">
    <h3>我是子页面2</h3>
    <h4>玩具:{{ toy }}</h4>
    <h4>书籍:{{ book }} 本</h4>
  </div>
</template>

<script lang="ts" name="Child2" setup>
import {ref} from "vue";
//数据
let toy = ref('奥特曼')
let book = ref(1)
//暴露toy, book这2个数据
defineExpose({toy, book})
</script>

<style scoped>
.mypage {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>

06、布局如下:

 07、浏览器显示如下:

 

标签:vue,color,refs,TypeScript,10px,import,ref,book,页面
From: https://www.cnblogs.com/tianpan2019/p/18377921

相关文章

  • YSP_refs_cn_2018_SpA
    rhTNFR-Fc中文文献-2018-SpA 脊柱关节炎 随机对照试验[1-15][1] 陈翔,李军.强脊补肾手法联合四藤一仙汤加减治疗强直性脊柱炎的临床观察.河北中医,2018,40(03):430-433.浏览文摘[2] 葛洪亮,胡建康.益赛普对强直性脊柱炎患者关节活动性指标的影响.当代医学,20......
  • YSP_refs_cn_2018_其他关节炎及PsO
    rhTNFR-Fc中文文献-2018-其他炎性关节炎及PsO 银屑病关节炎 银屑病随机对照试验[1][1] 张玲玲,龚瑜,于倩,等.益赛普联合甲氨蝶呤治疗中重度斑块型银屑病的有效性和安全性.同济大学学报(医学版),2018,39:7-11.浏览文摘 临床+基础 单臂观察[2][2] 李影,陆......
  • YSP_refs_cn_2018OffL_BasicRes_
    rhTNFR-Fc中文文献-2018-适应症外和基础研究 探索适应症外 适应症外 随机对照试验[1][1] 邵楠.依那西普治疗多发性大动脉炎的效果观察.心理医生,2018,24(17):162-163.浏览文摘 病例对照[2][2] 孙凡婷,胡蓬勃,郭立莎,等.注射用重组人II型肿瘤坏死因子......
  • YSP_refs_cn_2018_RA
    rhTNFR-Fc中文文献-2018-RA 类风湿关节炎 随机对照试验[1-14][1] 敖亮,刘瑞,李静.依那西普联合甲氨蝶呤治疗类风湿关节炎的临床疗效及安全性.临床医学研究与实践,2018,3:51-52.浏览文摘[2] 曹赛霞.注射用重组人Ⅱ型肿瘤坏死因子受体-抗体融合蛋白治疗类风湿关节......
  • 056、Vue3+TypeScript基础,页面通讯之$attrs父类子类孙类互传数据和事件
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • 一个可以搜索页面内超链接的HTML页面
    页面效果如上,含有标题,搜索框和一些超链接,在搜索框输入一些文字可以在下方显示含有这些文字的超链接。这里的搜索不仅可以中文,还可以是英文,数字HTML代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=d......
  • 053、Vue3+TypeScript基础,页面通讯之$attrs的使用
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • 高颜值好看的登录页面(附源码)
    1 <!DOCTYPEhtml><html><head><meta charset="utf-8" /><title>登录</title><link rel="stylesheet" type="text/css" href="css/index.css" /></head><body>&l......
  • YSP_refs_cn_2017_其他关节炎及PsO
    rhTNFR-Fc中文文献-2017-其他炎性关节炎及PsO 银屑病关节炎 随机对照试验[1][1] 桂银莉,史丽璞,郇稳,等.益赛普联合甲氨蝶呤治疗银屑病关节炎34例临床效果观察.北方药学,2017,14(9):143-144.浏览文摘 银屑病病例对照[2][2] 张杰,李江涛,邓文郁,等.......
  • YSP_refs_cn_2017_适应症外及基础研究
    rhTNFR-Fc中文文献-2017-适应症外和基础研究 探索适应症外 案例报道[1-10][1] 杨丽颖,马俊兵.重组人Ⅱ型肿瘤坏死因子受体-抗体融合蛋白治疗红皮病性银屑病的疗效观察.中国医疗美容,2017,7:33-35.浏览文摘[2] 李赛燕.益赛普治疗白塞病的临床分析.现代养生(下半月......