Vue3 组件

runoob 2023-04-06 原文

Vue3 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。

以下实例我们将 Vue 应用挂载到 <div id="app"></div>，应该传入 #app：

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

注册一个全局组件语法格式如下：

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

my-component-name 为组件名，/* ... */ 部分为配置选项。注册后，我们可以使用以下方式来调用组件：

<my-component-name></my-component-name>

一个简单的 Vue 组件的实例：

全局组件实例

注册一个简单的全局组件 runoob，并使用它：

<div id="app"> <runoob></runoob> </div> <script> // 创建一个Vue 应用 const app = Vue.createApp({}) // 定义一个名为 runoob的新全局组件 app.component('runoob', { template: '<h1>自定义组件!</h1>' }) app.mount('#app') </script>

尝试一下 »

接下来我们再注册一个 button-counter 组件，在每次点击后，计数器会加 1:

实例

// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: `
<button @click="count++">
点了 {{ count }} 次！
</button>`
})
app.mount('#app')
</script>

尝试一下 »

注意：template 中 ` 是反引号，不是单单引号 '。

组件的复用

你可以将组件进行任意次数的复用：

实例

尝试一下 »

全局组件

以上的实例中我们的组件都只是通过 component 全局注册的。

全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。

全局组件实例

注册一个简单的全局组件 runoob，并使用它：

<div id="app"> <runoob></runoob> </div> <script> // 创建一个Vue 应用 const app = Vue.createApp({}) // 定义一个名为 runoob 的新全局组件 app.component('runoob', { template: '<h1>自定义组件!</h1>' }) app.mount('#app') </script>

尝试一下 »

局部组件

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

然后在 components 选项中定义你想要使用的组件：

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

局部组件实例

注册一个简单的局部组件 runoobA，并使用它：

<div id="app"> <runoob-a></runoob-a> </div> <script> var runoobA = { template: '<h1>自定义组件!</h1>' } const app = Vue.createApp({ components: { 'runoob-a': runoobA } }) app.mount('#app') </script>

尝试一下 »

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

Prop 实例

<div id="app"> <site-name title="Google"></site-name> <site-name title="Runoob"></site-name> <site-name title="Taobao"></site-name> </div> <script> const app = Vue.createApp({}) app.component('site-name', { props: ['title'], template: `<h4>{{ title }}</h4>` }) app.mount('#app') </script>

尝试一下 »

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

Prop 实例

<div id="app"> <site-info v-for="site in sites" :id="site.id" :title="site.title" ></site-info> </div> <script> const Site = { data() { return { sites: [ { id: 1, title: 'Google' }, { id: 2, title: 'Runoob' }, { id: 3, title: 'Taobao' } ] } } } const app = Vue.createApp(Site) app.component('site-info', { props: ['id','title'], template: `<h4>{{ id }} - {{ title }}</h4>` }) app.mount('#app') </script>

尝试一下 »

Prop 验证

组件可以为 props 指定验证要求。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

type 可以是下面原生构造器：

String
Number
Boolean
Array
Object
Date
Function
Symbol

type 也可以是一个自定义构造器，使用 instanceof 检测。

有关Vue3 组件的更多相关文章

计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图：这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
vue3.0 + vite2.0+如何兼容低版本浏览器 - 2
这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战（附源码包括添加手机联系人和发短信） - 2
运行有问题或需要源码请点赞关注收藏后评论区留言一、利用ContentResolver读写联系人在实际开发中，普通App很少会开放数据接口给其他应用访问。内容组件能够派上用场的情况往往是App想要访问系统应用的通讯数据，比如查看联系人，短信，通话记录等等，以及对这些通讯数据及逆行增删改查。首先要给AndroidMaifest.xml中添加响应的权限配置下面是往手机通讯录添加联系人信息的例子效果如下分成三个步骤先查出联系人的基本信息，然后查询联系人号码，再查询联系人邮箱代码 ContactAddActivity类packagecom.example.chapter07;importandroid
Vue3的新特性 - 2
Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工
ruby - 模块化、基于组件的 Sinatra 应用程序的架构 - 2
我正在开发一个包含大约10个不同功能组件的Sinatra应用程序。我们希望能够将这些组件混合并匹配到应用程序的单独实例中，完全从config.yaml文件配置，如下所示:components:-route:'/chunky'component_type:FoodListercomponent_settings:food_type:baconmax_items:400-route:'places/paris'component_type:Mappercomponent_settings:latitude:48.85387273165654longitude:2.340087890625-
ruby - 如何使用( ruby ) Rack 中间件组件设置 cookie？ - 2
我正在为需要有条件地设置cookie的Rails应用编写Rack中间件组件。我目前正在尝试设置cookie。通过谷歌搜索，这似乎应该可行:classRackAppdefinitialize(app)@app=appenddefcall(env)@status,@headers,@response=@app.call(env)@response.set_cookie("foo",{:value=>"bar",:path=>"/",:expires=>Time.now+24*60*60})[@status,@headers,@response]endend它不会给出错误，但也不会设置coo
ruby-on-rails - 哪些组件使 VIM 成为一个好的(伟大的)ruby 编辑器？ - 2
我正在linux机器上学习rubyonrails并磨练我的VIM技能(skillz？)。当我在使用C++的时候开始使用VIM时，我有一个friend有一个很棒的vimfiles文件夹，里面有很多东西可以开始使用。从头开始，vim很棒，但感觉它还可以做得更好。我目前有:vim-rubybufferexplorerxml-edit(虽然我目前没有它可以处理erb文件)我知道这只是一些更有经验的vim/ruby开发人员所拥有的东西的皮毛(包括vim.rc文件中的一次性)。在某个地方是否有一个列表(或者我们可以创建一个)使ruby(和rails)编程更有趣所需的一堆标准vim配置？是否有一
修改第三方UI组件库样式的四种方法 - 2
前提：当我们要修改vant组件库中Tabbar图标大小的样式（原图标是字体图标，大小由font-size控制）。字体图标字体大小由css变量（--van-tabbar-item-icon-size）控制， 1.插槽方法结论：当你想要自定义使用插槽时，插入自己的元素，那么可以直接在当前作用域直接修改元素的样式。自定义img{height:28px}传入图片，用height属性控制图片大小，达到与字体图标相同效果2.全局定义变量结论：全局定义一个变量，覆盖它默认变量的值定义变量缺点：全局修改。 :root{--van-tabbar-item-icon-size:30px!important;/

Vue3 组件

Vue3 组件

全局组件实例

实例

组件的复用

实例

全局组件

全局组件实例

局部组件

局部组件实例

Prop

Prop 实例

动态 Prop

Prop 实例

Prop 验证

有关Vue3 组件的更多相关文章

随机推荐