vue3.0入门(四):组件
组件
- 组件基础
<my-counter></my-counter>
const app = Vue.createApp({ // 根组件
data() {
return {}
}
})
//注册子组件my-counter
app.component('my-counter', {
data() {
return {}
},
template: ``,
methods: {
}
}).mount('dom节点')
- 通过props向子组件传值
<blog-post title='标题一'></blog-post>
app.component("blog-post",{
props: ['title'],
template: `<h3>{{title}}</h3>`
})
<!-- 动态绑定:通过props向子组件传值;将数组中的数据循环到组件-->
<blog-post
v-for="post in posts"
:key="post.id"
:title="post.title"
></blog-post>
- 监听子组件事件:单项数据流,父组件可向子组件传递的数据,反之则不行,父组件的数据改变时,子组件也会随之改变
app.component('blog-post1', { // 1.注册一个组件
props: ['title'],
template: `
<h3>{{title}}</h3>
<button @click='$emit("btn", title)'>按钮</button> // 2.emit方法传入事件名称btn,同时可传入参数
` ,
emits: ['btn'] // 3.数组中包含所有emit
})
<blog-post1 @btn='btn($event)'></blog-post> // 4.v-on:btn=btn() 第一个btn表示脚本部分自定义的事件名称,第二个btn()表示根组件的methods
<blog-post1 @btn='btn'></blog-post> //等同于上面的写法
const app = Vue.createApp({
data() {
return {}
},
methods: {
btn(e) { // 5.
// ...
}
}
})
插槽
const app = Vue.createApp({
})
app.component('alert-box', {
template: `
<div>Error:<slot></slot></div>
`
}).mount('#app')
<!-- 使用该组件时,组件中间使用的标签文本会替换slot-->
<alert-box><span>服务器异常</span></alert-box>
script模板
<!-- 相当于注册组件编写模板时,提取到一个script标签中-->
<script type='text/x-template' id='demo'>
<!-- 写入标签文本-->
</script>
const app = Vue.createApp({})
app.component('alert-box', {
template: `#demo`
}).mount('#app')
<alert-box></alert-box>
vue3.0入门(四):组件的更多相关文章
- vue3.0入门(三)
前言 最近在b站上学习了飞哥的vue教程 学习案例已上传,下载地址 class绑定 对象绑定 :class='{active:isActive}' // 相当于class="active&q ...
- vue3.0入门(二)
前言 最近在b站上学习了飞哥的vue教程 学习案例已上传,下载地址 指令 #id2{ // css部分 font-size: 24px; color: green; } v-bind:href=&qu ...
- vue3.0入门(一)
前言 最近在b站上学习了飞哥的vue教程 学习案例已上传,下载地址 使用方式 使用在线cdn 下载js文件并自托管,引入到项目后使用 使用npm安装后,用cli来构建项目 声明式渲染 Vue2需引入v ...
- vue3.0入门(五):vite构建vue项目
使用vite构建项目步骤 安装node,cmd输入:node -v验证是否安装成功:一般node安装后会自动安装npm,cmd输入:npm -v验证是否安装成功 选择一个文件夹作为项目文件夹,搜索框输 ...
- vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件
基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...
- vue3.0自定义指令(drectives)
在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...
- 纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
随机推荐
- PAT甲级:1064 Complete Binary Search Tree (30分)
PAT甲级:1064 Complete Binary Search Tree (30分) 题干 A Binary Search Tree (BST) is recursively defined as ...
- MySQL架构及优化原理
1 MySQL架构原理 1.1 MySQL架构原理参看下述链接: https://blog.csdn.net/hguisu/article/details/7106342 1.2 MySQL优化详解参 ...
- fatal error: all goroutines are asleep - deadlock!
一.问题截图 fatal error: all goroutines are asleep - deadlock! goroutine 1 [chan receive]: main.main() /U ...
- vulnhub-DC:4靶机渗透记录
准备工作 在vulnhub官网下载DC:4靶机https://www.vulnhub.com/entry/dc-4,313/ 导入到vmware,设置成NAT模式 打开kali准备进行渗透(ip:19 ...
- 【阿菜用工具】Slither:Solidity静态分析框架
工具简介 Slither 是一个 python3 开发,用于检测智能合约(solidity)漏洞的静态分析框架. Slither 的 Github 地址:https://github.com/cryt ...
- Android无障碍宝典-talkback
http://geek.csdn.net/news/detail/93269 http://geek.csdn.net/news/detail/135867
- BUUCTF-[极客大挑战 2019]BabySQL(联合注入绕过waf)+[极客大挑战 2019]LoveSQL(联合注入)
BUUCTF-[极客大挑战 2019]BabySQL(联合注入绕过waf) 记一道联合注入的题,这道题存在过滤. 经过手工的测试,网站会检验用户名和密码是否都存在,如果在用户名处插入注入语句,语句后面 ...
- 年薪60W的Android程序员究竟多累、多苦?一条高赞评论扎了无数人的心
为啥经常听到程序员朋友说自己太辛苦了.太累了,其实原因很简单:干活苦.竞争大.技术致富难. 干活苦: 有新闻说晚上十点某领导在微信群要求下属在十分钟内回复,一员工因休息早而没及时回复被裁了. 对于程序 ...
- 腾讯技术团队整理,为什么 Flutter 能最好地改变移动开发
导语 | Flutter 框架是当下非常热门的跨端解决方案,能够帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面等多端开发.但仍然有很多产品.设计.甚至开发同学并不了解 Flut ...
- Mantis安装过程笔记
安装平台:Windows Server 2003 R2 Enterprise x64 Edition 软件: EasyPHP-5.3.6.1 mantisbt-1.2.6 安装过程: 首先安装Easy ...