Vue组件入门(二)props和emit

简介: Vue组件入门(二)props和emit

前言


有些情况下,我们可能对组件内部内容的需求不是固定的,这个时候我们就需要通过向组件传递内容数据来解决这个问题。而要实现这样的效果,就可以通过props属性来实现。


props


通过defineProps在组件内部声明注册,defineProps并不需要显示导入。而声明的props也会自动暴露给模板,在模板中可以直接使用。


<script setup>
defineProps(['content'])
</script>
<template>
  <span>{{ content }}</span>
</template>
复制代码


注意:defineProps 只能在 <script setup> 中使用。


defineProps 会返回一个对象,其中包含了该组件声明的所有 props:


const props = defineProps(['content'])
console.log(props.content)
复制代码


当props被注册声明后,在父组件使用的时候,需要通过自定义属性的形式进行数据的传递。


<contentCom content="今天是星期一" />
<contentCom content="晴转多云" />
<contentCom content="阳光明媚" />
复制代码


emit


有些时候我们可能与父组件进行交互。比如说,组件内部有一个按钮,通过点击该按钮可以动态增大字体大小。 那首先要做的就是,在父组件中,声明一个ref来动态控制字体大小:


const fontSize = ref(1)
复制代码


在模板中使用他来控制字体大小:


<div :style="{ fontSize: fontSize + 'em' }">
  <contentCom/>
</div>
复制代码


而要实现我们上述所说的功能,通过子组件来控制字体大小的话,还需要通过自定义事件的方式来实现。也就是说,需要在子组件中抛出一个事件,然后在父组件中进行监听,来实现操作。


首先通过@在父组件进行监听:


<div :style="{ fontSize: fontSize + 'em' }">
  <contentCom @change-fontSize= fontSize += 1 />
</div>
复制代码


在子组件中通过内置的$emit方法,进行事件的抛出:


<!-- contentCom.vue -->
<template>
  <div>
    <span>{{ content }}</span>
    <button @click="$emit('change-fontSize')">改变字体</button>
  </div>
</template>
<script setup>
defineEmits(['change-fontSize'])
</script>
复制代码


注意:defineEmits 只能在 <script setup> 中使用。

相关文章
|
3月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
180 64
|
3月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
73 8
|
3月前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
3月前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
147 1
|
6天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
10天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
60 12
|
6天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。

热门文章

最新文章