【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) 是一套构建用户界面的渐进式 ...
随机推荐
- 流式dma和一致性dma的区别
流式 DMA(Streaming DMA)和一致性 DMA(Consistent DMA)是两种不同的内存映射模式,用于 DMA(直接内存访问)操作.它们的主要区别在于缓存一致性.性能和使用场景.以下 ...
- PRT预计算辐射传输方法
PRT(Precomputed Radiance Transfer)技术是一种用于实时渲染全局光照的方法.它通过预计算光照传输来节省时间,并能够实时重现面积光源下3D模型的全局光照效果. 由于PRT方 ...
- Vue3中的新的内置组件
在vue2中的内置组件: 动态路由中的 component :作用:动态显示路由的挂载点,使用 is 属性动态显示组件 : keep-alive :作用:使被包裹的组件保留状态,避免被重新渲染 : 路 ...
- spring boot--@Value注解失效
接手一个任务开发预警邮件需求,计划将邮件信息(hostName,用户名,密码,发送方,接受方等)设置为可配置变量,配置在配置中心,使用@Value注解获取配置,如下: @Value("${w ...
- 微软nuget国内源
https://www.cnblogs.com/Leo_wl/p/16328650.html 为解决国内访问NuGet服务器速度不稳定的问题 ,这里推荐使用NuGet微软官方中国国内镜像 地址:htt ...
- vue,js直接导出excel，xlsx的方法，XLSX_STYLE 行高设置失效的问题解决，冻结窗体修改支持
1.先安装依赖:xlsx.xlsx-style.file-saver三个包 npm install xlsx xlsx-style file-saver 出现错误: This relative mod ...
- 4年经验来面试20K的测试岗，连基础都不会，还不如招应届生。
公司前段时间缺人,也面了不少测试,结果竟然没有一个合适的.一开始瞄准的就是中级的水准,也没指望来大牛,提供的薪资在10-20k,面试的人很多,但平均水平很让人失望.看简历很多都是3.4年工作经验,但面 ...
- 给 Ollama 穿上 GPT 的外衣
上一篇我们介绍了如何在本地部署 ollama 运行 llama3 大模型.过程是相当简单的.但是现在给大模型交流只能在命令行窗口进行.这样的话就只能你自己玩了.独乐乐不如众乐乐嘛.我们接下来说一下如何 ...
- manim边学边做--立方体和棱柱体
本篇介绍Manim中创建三维立体的两个常用对象:Cube和Prism. Cube在制作动画时,可以用于展示立体几何中的立方体概念,或者通过旋转.缩放等动画效果来帮助理解三维空间中的几何变换. Pris ...
- 2023NOIP A层联测9 风信子+P2048 【NOI2010】 超级钢琴 2023
P2048 [NOI2010] 超级钢琴 2023NOIP A层联测9 风信子 一年 OI 一场空,一道原题见祖宗-- Ps:超级钢琴是风信子的前置题. 超级钢琴 题意 在一段序列上,选择长度为 \( ...