首页 > 其他分享 >vue中的<script setup>与<script>

vue中的<script setup>与<script>

时间:2024-04-09 20:23:20浏览次数:33  
标签:vue const childValue value 组件 childFn ref

<script setup>是在vue3.2之后新增的语法糖,简化了API的写法

1.声明的变量无需return,可以直接在模板中使用,实现了顶层的绑定

2.引入组件会自动注册,无需再使用components



<script>
export default {
data() {
return {
dialogVisible: false
};
},
};
</script>
------------------------------------
<script setup> import {ref} from "vue"; const dialogVisible=ref(true) </script>

3.使用defineProps接收父组件传递的值,返回的是props对象其中的值是只读的,可以在模板中直接使用,defineEmits获取父组件的自定义事件,defineExpose属性/方法对外暴露

<template>
<p>父组件</p>
<child ref="childRef" :value="parentValue" @func="func"/>
</template>

<script setup>
import child from "./child";

const parentValue = ref('我是爸爸');
const func = (params) => {
parentValue.value = params
};

const childRef = ref(null);
onMounted(()=>{
// 调用子组件中的参数和函数
console.log(childRef.value.childValue);
childRef.value.childFn();
});
</script>

<script>
export default {
name: "parent"
}
</script>
<--! -------------------------------------------------------->

<template>
<p>子组件</p>
<p>{{ value }}</p>
<button @click="emit('func', '哈哈哈')">点击</button>
</template>

<script setup>
import { defineProps, defineEmits, defineExpose } from 'vue'

// 接收父级传过来的参数
const props = defineProps(["value"]);
// 接收父级传过来的方法
const emit = defineEmits(["func"]);

const childValue = '我是儿子';
const childFn = () => {
console.log("我是子组件中的方法");
}

// 将参数childValue和函数childFn暴露给父组件
defineExpose({
childValue,
childFn
});
</script>

<script>
export default {
name: "child"
}
</script>

 

标签:vue,const,childValue,value,组件,childFn,ref
From: https://www.cnblogs.com/kun1790051360/p/18124707

相关文章

  • 用Vue全家桶手工搓了一个类似抖音短视频的软件,全开源
    用Vue全家桶手工搓了一个类似抖音短视频的软件,全开源软件简介用Vue全家桶手工搓了一个高仿抖音,全开源PC浏览器请用手机模式访问。先按F12调出控制台,再按Ctrl+Shift+M切换到手机模式,手机请用Via浏览器或者Chrome浏览器预览。其他浏览器会强制将视频全屏,导致样式都失效。......
  • vue3 + typescript 检测高德地图类型
    在ts项目中使用高德地图,为了方便使用类型检测及类型提示,需引入高德地图的类型文件,操作如下:1、引入@amap/amap-jsapi-types插件npmi-S@amap/amap-jsapi-types2、新建类型文件types/index.d.tsimport'@amap/amap-jsapi-types';3、在tsconfig.json中配置:"include":[......
  • Vue中component lists rendered with v-for should have explicit keys异常
    在Vue.js中,当你在组件列表中使用v-for指令渲染多个组件时,每个组件元素都应当有一个明确的key属性。Vue.js引擎通过这个key来优化虚拟DOM的diff过程,提升页面更新效率,并确保状态保持一致。例如,如果你有这样的代码:Vue<ul><liv-for="iteminitems">{{......
  • 跨框架探索:React Redux 和 Vuex 对比分析快速掌握React Redux
    ReactRedux和Vuex都是前端状态管理库,分别用于React和Vue.js框架。它们都提供了一套规范的状态管理机制,帮助开发者更好地组织和管理应用状态。下面是它们的一些异同点:相同点:中心化状态管理:两者都提供了一个全局的存储中心,使得组件间状态共享变得简单。响应式:状......
  • VueJs使用axios上传文件
    html<inputtype="file"id="fileUploadEle"ref="fileUploadEle"style="display:none;"accept=".png,.jpg"@change="selectFile"/><labelfor="fil......
  • Vue3 给组件设置name
    在Vue3的<scriptsetup>模式下,往往会忽略name;但是在keep-alive等情况下又需要用到!方法1:<scriptlang="ts">exportdefault{name:"my-component"}</script><scriptlang="ts"setup>/*业务代码*/</script>方法......
  • vue canvas绘制信令图,动态显示标题、宽度、高度
    需求:1、 根据后端返回的数据,动态绘制出信令图2、根据 dataStatus返回值:0和1,判断文字内容的颜色,0:#000,1:red3.、根据lineType 返回值:0和1, 判断箭头线的显示是实线、虚线4、根据返回的文字内容的换行符:“\r\n”自动换行(这步比较难,得计算高度)最后的效果图大......
  • vue使用docxtemplater导出word
    安装//安装docxtemplaternpminstalldocxtemplaterpizzip--save//安装jszip-utilsnpminstalljszip-utils--save//安装jszipnpminstalljszip--save//安装FileSavernpminstallfile-saver--save//引入处理图片......
  • Vue2 + Spring Boot的题库管理和在线考试系统
    一个demo从0到1的搭建~使用mybatisplus快速开发springboot项目(一)--初始化-CSDN博客使用mybatisplus快速开发springboot项目(二)--业务实现_如何用mybatis-plus写业务-CSDN博客使用mybatisplus快速开发springboot项目(三)--JWT拦截器-CSDN博客使用mybatisplus快速开发springboot......
  • vue element 显示 base64格式图片
     <el-imagestyle="width:300px;height:150px":src="url":preview-src-list="srcList"></el-image>this.url='data:image/png;base64,'+row.PAGE_IMG其他格式data:,文本数据data:text/plain,......