【Vue】学习笔记：Vue组件
文末有我看的这个视频的链接。
组件注册
全局注册
全局注册的组件可以在注册后用于任意实例或者组件中
Vue.component('组件名',{/*选项对象*/})
全局注册必须设置在跟Vue实例之前
实例
<div id="root">
<input-search></input-search>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('input-search',{
template:' <input class="control" type="text" placeholder="请输入要搜索的关键字">'
})
const vm = new Vue({
el:'#root',
data(){
return{
}
}
})
vm.$mount('#root')
</script>
组件基础
组件命名规则
- kebab-case:'my-component'
- PascalCase:'MyComponent'
Vue.component('my-component-a',{/**/})
Vue.component('MyComponentB',{/**/})
无论使用哪种命名方式，在DOM中都只有第一种命名方式可以使用
<div id="root">
<input-search></input-search>
<just-play></just-play>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('input-search',{
template:' <input class="control" type="text" placeholder="请输入要搜索的关键字">'
})
Vue.component('JustPlay',{
template:'<a href="https://mllt.cc">Just play</a>'
})
const vm = new Vue({
el:'#root',
data(){
return{
}
}
})
vm.$mount('#root')
</script>
template选项
该选项用于设置组件的结构，最终被引入根实例或者其他组件中
单项数据流
父子组件间所有prop数据应当存储在data中后操作
<div id="root">
<my-component :initial-title="title"></my-component>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('my-component',{
props:['initialTitle'],
template:`
<div>{{title}}</div>
`,
data(){
return {
title:this.initialTitle
}
}
});
const vm = new Vue({
el:'#root',
data(){
return{
title:"Just Play?"
}
}
})
vm.$mount('#root')
</script>
<div id="root">
<my-component :initial-title="title"></my-component>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('my-component',{
props:['initialTitle'],
template:`
<div>{{title}}
<button @click="fn">按一下</button>
</div>
`,
data(){
return {
title:this.initialTitle
}
},
methods:{
fn(){
console.log(this);
this.title="It's new title"
}
}
});
const vm = new Vue({
el:'#root',
data(){
return{
title:"Just Play?"
}
}
})
vm.$mount('#root')
</script>
如果prop为数组或对象时，子组件操作将会影响到父组件的状态
<div id="root">
<my-component
:initial-title="title"
:obj="obj"></my-component>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('my-component',{
props:['initialTitle','obj'],
template:`
<div>{{title}}
<button @click="fn">按一下</button>
</div>
`,
data(){
return {
title:this.initialTitle
}
},
methods:{
fn(){
console.log(this);
// this.title="It's new title"
this.obj.name="萌狼蓝天";
}
}
});
const vm = new Vue({
el:'#root',
data(){
return{
title:"Just Play?",
obj:{
name:"xiaoming",
age:18,
}
}
}
})
vm.$mount('#root')
</script>
data选项
data选项用于存储组件的数据，与根实例不同，组件的data选项必须为函数，数据设置在返回值对象中
<div id="root">
<my-com-a></my-com-a>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('MyComA',{
template:`
<div>
<h3>{{title}}</h3>
<p>{{content}}</p>
</div>
`,
data(){
return{
title:'Biao ti ya',
content:"nei rong ya"
}
}
})
const vm = new Vue({
el:'#root',
data(){
return{
}
}
})
vm.$mount('#root')
</script>
这种喷那个实现方式为了确保每个组件实例可以维护一份被返回对象的独立拷贝，不会相互影响
局部注册
局部注册的组建只能用在当前实例或组件中
<div id="root">
<my-com-a></my-com-a>
<my-com-b></my-com-b>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
const vm = new Vue({
el:'#root',
data(){
return{
}
},
components:{
'MyComA':{
template:`
<div>
<h3>{{title}}</h3>
<p>{{content}}</p>
</div>
`,
data(){
return{
title:'Biao ti ya',
content:"nei rong ya"
}
}
},
'MyComB':{
template:`
<div>
<h3>{{title}}</h3>
<p>{{content}}</p>
</div>
`,
data(){
return{
title:'Biao ti ya2',
content:"nei rong ya2"
}
}
},
}
})
vm.$mount('#root')
</script>
单独配置组件的选项对象
var MyComponentA={/*……*/}
var MyComponentB={/*……*/}
new Vue({
el:'#app',
components:{
'my-component-a':MyComponentA,
'my-component-b':MyComponentB,
}
});
ES6对象属性简写
new Vue({
el:'#app',
components:{
MyComponentA,
MyComponentB
}
});
<div id="root">
<my-com-a></my-com-a>
<my-com-b></my-com-b>
</div>
<script>
Vue.config.productionTip = false //隐藏控制台提示
var MyComA = {
template: `
<div>
<h3>{{title}}</h3>
<p>{{content}}</p>
</div>
`,
data() {
return {
title: 'Biao ti ya',
content: "nei rong ya"
}
}
};
var MyComB = {
template: `
<div>
<h3>{{title}}</h3>
<p>{{content}}</p>
</div>
`,
data() {
return {
title: 'Biao ti ya2',
content: "nei rong ya2",
}
}
};
const vm = new Vue({
el: '#root',
data() {
return {}
},
components: {
'MyComA': MyComA,//写法1
MyComB,//写法2
}
})
vm.$mount('#root')
</script>
<div id="root">
<!-- 静态属性设置 -->
<my-component-a
title="静态标题"
content="静态内容"
></my-component-a>
<!-- 动态属性绑定 -->
<my-component-a
v-bind:title="'zhe shi jing tai biao ti'"
:content="'zhe sh jing tai nei rong'"
></my-component-a>
<!-- 动态属性绑定常用操作 -->
<my-component-a
:title="item.title"
:conent="item.content"
></my-component-a>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
//创建子组件
Vue.component('my-component-a',{
props:['title','content'],
template:`
<div>
<h3>{{title}}</h3>
<p>{{content}}</p>
</div>
`
})
const vm = new Vue({
el:'#root',
data(){
return{
item:{
title:'Biaoti',
content:'neirong',
}
}
}
})
vm.$mount('#root')
</script>
组件通信
在组件间传递数据的操作，称为组件通信
父组件向子组件传值
组件传值
通过子组件的props选项接收父组件的传值
Vue.component('my-component'，{
props:['title'],
template:'<h2>{{title}}</h2>'
})
注意：props不要与data存在同名属性
父组件设置如下
<div id="app">
<my-component title="例1"></my-component>
<my-component :title="例2"></my-component>
<my-component :title="item.title"></my-component>
</div>
new Vue({
el:'#app',
data:{
item:{
title:'父组件中的数据'
}
}
})
Props命名规则
建议prop命名使用cameCase，父组件绑定时使用kebab-case
<div id="root">
<my-component
:item-title='item.title'
:item-content="item.content"
></my-component>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('my-component',{
props:['itemTitle','itemContent'],
template:`
<div>
<h3>{{itemTitle}}</h3>
<p>{{itemContent}}</p>
</div>
`
})
const vm = new Vue({
el:'#root',
data(){
return{
item:{
title:'Biao Ti is',
content:'Nei Rong is'
}
}
}
})
vm.$mount('#root')
</script>
练习：通过v-for创建组件
<div id="root">
<!-- 通过v-for遍历数据items，创建组件并生成内容 -->
<demo-item
v-for="item in items"
:item-title="item.title"
:item-content="item.content"
:key = "item.title"
:item="item"
></demo-item>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('demoItem',{
props:['itemTitle','itemContent','item'],
template:`
<div>
<h3>{{itemTitle}}</h3>
<p>{{itemContent}}</p>
</div>
`
})
const vm = new Vue({
el:'#root',
data(){
return{
items:[
{
title:'Biao Ti is',
content:'Nei Rong is'
},
{
title:'Biao Ti is2',
content:'Nei Rong is2'
},
{
title:'Biao Ti is3',
content:'Nei Rong is3'
}
]
}
}
})
vm.$mount('#root')
</script>
子组件向父组件传值
组件传值
子向父传值需要通过自定义事件实现
例如：商品为子组件，购物车为父组件，父组件需要统计商品个数，就需要在子组件个数变化时传值给父组件。
<div id="root">
<product-item
v-for="product in products"
:key = "product.id"
:title="product.title"
></product-item>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('ProductItem',{
props:['title'],
template:`
<div>
<span>商品名称:{{title}},商品个数:{{count}}</span>
<button @click="countIns">+1</button>
<button @click="countInsf">-1</button>
</div>
`,
data(){
return{
count:0
}
},
methods:{
countIns(){
this.count++;
},
countInsf(){
if(this.count<=0) alert("已经清空啦")
else this.count--;
},
}
})
const vm = new Vue({
el:'#root',
data(){
return{
products:[
{
id:1,
title:'苹果11斤'
},
{
id:2,
title:'香蕉12斤'
},
{
id:3,
title:'橙子13斤'
},
],
totalCount:0
}
}
})
vm.$mount('#root')
</script>
子组件数据变化时，通过$emit()触发自定义事件
Vue.component('product-item',{
……
methods:{
countIns(){
this.$emit('count-change');
this.count++;
}
}
});
自定义事件名称建议使用kebab-case
父组件监听子组件的自定义事件，并设置处理程序
<div id="app">
……
<product-item
……
@count-change = "totalCount++"
></product-item>
……
</div>
<div id="root">
<product-item
v-for="product in products"
:key = "product.id"
:title="product.title"
@count-change-add="totalCount++"
@count-change-jianshao="totalCount--"
></product-item>
<p>商品总数为：{{totalCount}}</p>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
Vue.component('ProductItem',{
props:['title'],
template:`
<div>
<span>商品名称:{{title}},商品个数:{{count}}</span>
<button @click="countIns">+1</button>
<button @click="countInsf">-1</button>
</div>
`,
data(){
return{
count:0
}
},
methods:{
countIns(){
this.$emit('count-change-add');
this.count++;
},
countInsf(){
if(this.count<=0) alert("已经清空啦")
else{
this.$emit('count-change-jianshao');
this.count--;
}
},
}
})
const vm = new Vue({
el:'#root',
data(){
return{
products:[
{
id:1,
title:'苹果11斤'
},
{
id:2,
title:'香蕉12斤'
},
{
id:3,
title:'橙子13斤'
},
],
totalCount:0
}
}
})
vm.$mount('#root')
</script>
自定义事件传值
子组件触发事件时可以向父组件传值
非父子组件传值
非父子组件：兄弟组件或完全无关的两个组件
其他通信方式
组件插槽
内置组件
观看的教程链接
【Vue】学习笔记：Vue组件的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记之组件与通信
1. 组件 1.1. 什么是组件 组件是可复用的Vue实例, 说白了就是一组可以重复使用的模板,通常一个应用会以一棵嵌套的组件树的形式来组织: 例如,你可能会有页头.侧边栏.内容区等组件,每个组件又包 ...
- vue学习笔记：组件
组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,说白了就是一组可以重复使用的模板.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽 ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
随机推荐
- C#/.NET/.NET Core技术前沿周刊 | 第 8 期（2024年10.01-10.06）
前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...
- 进程管理中的active_mm是做什么的？
在Linux内核中,进程管理涉及到许多复杂的数据结构和机制,其中active_mm是与内存管理相关的一个关键概念.理解active_mm需要先了解与之相关的一些基本内核结构和概念. 基本概念 mm_s ...
- 使用 acme.sh 生成免费 90 天的 SSL 泛域名证书
原文地址求你点进去看,给自己的博客加加热度 https://typecho.hanzhe.site/archives/13.html acms.sh 是 Github 上开源的一款 SSL 证书申请工 ...
- 如果读完这几百 Python 的书籍，能成编程大佬吗？ #Python 入门 #编程 #编程学习 #知识分享
- SDUT 2021 Autumn Team Contest 36th G - Alice’s Stamps（补）
队友做出的这个题,赛后补的=.= G - Alice's Stamps (一般DP) 题目大意 :给你m个区间,选k个,求k个区间并集 1≤T≤100 1≤K≤M 1≤N,M≤2000 1≤Li≤ R ...
- Redis常见面试题：ZSet底层数据结构，SDS、压缩列表ZipList、跳表SkipList
文章目录 一.Redis数据结构概述 1.1 Redis有哪些数据类型 1.2 Redis本质是哈希表 1.3 Redis的哈希冲突与渐进式rehash 1.4 数据结构底层 1.4.1 简单动态字符 ...
- SqlSugarClient 代码优先建表， 根据给定的实体类，创建SQL语句, 之后创建MySQL表
using SqlSugar; using System; using System.Collections.Generic; using System.Reflection; using Syste ...
- API13Bate版来了DevEco已更新快来看新功能吧
HarmonyOS 5.0.1 Beta3,是HarmonyOS开发套件基于API 13正式发布的首个Beta版本.该版本在OS能力上主要增强了C API的相关能力,多个特性补充了C API供开发者使 ...
- P10681 COTS/CETS 2024 奇偶矩阵 Tablica
P10681 COTS/CETS 2024 奇偶矩阵 Tablica 来自 qnqfff 大佬的梦幻 dp. 约定 二元组 \((n,m)\) 表示一个 \(n\) 行 \(m\) 列的矩形. 不添加 ...
- Linux中的用户管理-创建删除修改
用户管理 一.用户分类 用户分为三类: 1.管理员 root root UID:0 #拥有最高权限 默认系统中就一个 UID即user ID 类似于身份号码,唯一的,不可重复 2.虚拟用户 作用:在运 ...