setup写在script标签中

快捷键 vb3s

父组件：

<template><div><child ref="childRef" :title="title" @onTitle="setTitle" /><button @click="getChild">获取child实例</button></div>
</template><!-- 此写法，它支持顶层async ,在此代码块中你可以直接写await -->
<script setup>
import { ref } from 'vue'
// 导入的组件，导入进来后，直接可以在模板中使用，无须再用 components 注册
import child from './components/child.vue'let title = ref('我是一个父组件')
let childRef = ref()const setTitle = tit => (title.value = tit)const getChild = () => {// vue3中的setup很安全，仅仅可以获得实例，获取不到数据console.log(childRef.value)
}
</script><style lang="scss" scoped></style>

子组件：

<template><div><h3>child组件 -- {{ title }}</h3><button @click="setTitle">修改父组件标题</button></div>
</template><script setup>
import { ref } from 'vue'
// 接受props中的属性
defineProps({title: { type: String }
})
// 定义自定义事件
const emit = defineEmits(['onTitle'])const setTitle = () => {// 事件名、数据emit('onTitle', Date.now() + '')
}const name = ref('aaaa')
const fn = () => {}// 子组件可以选择向外暴露的数据
defineExpose({name,fn
})
</script><style lang="scss" scoped></style>

setup写在script标签中相关推荐

script标签中type为script type=text/x-template是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
script标签中的async和defer
在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. ja ...
script标签中的crossorigin属性
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助. 而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 . 但是对于跨域的资源 , ...
script标签中写html,html中script标签的详细介绍
大家好,欢迎关注支持,谢谢!本篇将介绍html中script标签的详细用法,有兴趣的朋友可以了解一下! 一.前言在html中,为了实现动态交互效果,我们经常会嵌入其它脚本语言(如:JavaScrip ...
浅谈script标签中的async和defer
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了. 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲 ...
html script src属性,动态修改script标签中的src属性存在的问题
今天某个同事遇到一个诡异的问题,问题描述如下: 需求:通过脚本动态修改script标签的src来载入一段外部脚本并执行实现方式(#1): document.getElementById('exter ...
script标签中的defer和async属性
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本 ...
alert中文信息时乱码，html页面和script标签中均已设置为utf-8依然乱码
今天在原来的js文件中添加了一些新的逻辑判断,结果,alert的中文信息居然乱码,就是那种菱形的乱码,无语~ 网上的应对之策都是指定html文档和引入script标签时指定其编码,但公司是基于平台开发 ...
html事件中写js,html标签中绑定触发事件与js中绑定触发事件写法上的区别
html> js中方法名后加括号和不加口号的区别按钮 var test = function(){ var span = document.createElement("span&q ...

setup写在script标签中

setup写在script标签中相关推荐

最新文章

热门文章