vue3初体验-父子组件-defineComponent 写法

简介: vue3初体验-父子组件-defineComponent 写法

定义组件

<script lang="ts">
import { ref, defineComponent } from 'vue'

export default defineComponent({
  name: 'compoName',
  props: {
    modelValue: { // v-model:数据绑定
      type: Array,
      default: () => [],
    },
    prop1: {
      type: String,
      default: '',
    },
  },
  emits: ['update:modelValue'], // emit: 事件提交
  setup(props, context) {
    const foo = ref(false)
    //v-model: 绑定数据发生改变需要emit「update:modelValue」事件
    const handleChange = (value: any) => {
      context.emit('update:modelValue', value)
    }
    return {
      foo,
      handleChange,
    }
  },
})
</script>

使用

<CompoName v-model="foo" />
目录
相关文章
|
7天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
126 10
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
250 1
|
2月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
146 0
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
98 0
|
5月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1501 0
|
JavaScript
Vue父子组件传值(porvide+inject实现组件通信)
如果我们需要把父组件的值传递给子组件,而且子组件可能存在层层嵌套,那么就可以使用provide+inject的方法来实现组件之间的通信
240 0
Vue父子组件传值(porvide+inject实现组件通信)
|
JavaScript 前端开发
前端-vue基础63-非父子组件传值
前端-vue基础63-非父子组件传值
135 0
前端-vue基础63-非父子组件传值
|
JavaScript
Vue父子组件传值通讯,超详细注释
Vue父子组件传值通讯,超详细注释
276 0