【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) 是一套构建用户界面的渐进式 ...
随机推荐
- 【首场重磅亮相】KaiwuDB 1.0 时序数据库线上发布会明日开启！邀您共同见证
首场重磅亮相 KaiwuDB 是浪潮集团控股的数据库企业,以多模数据库为核心,面向工业物联网.数字能源.交通车联网.智慧城市.数字政务等多种场景,提供领先创新的数据服务软件. 新生代数据库,扬帆起航正 ...
- [Vue warn]: Error in v-on handler (Promise/async): "TypeError: Object(...) is not a function"
引用外部发文件时候,只是部分引用,所以原本是解构方式引用的,我忘记加{ }了
- Awesome-Visual-Captioning
目录 Table of Contents Paper Roadmap ACL-2021 CVPR-2021 AAAI-2021 ACMMM-2020 NeurIPS-2020 ECCV-2020 Vi ...
- MySQL 通过 Next-Key Locking 技术（行锁+间隙锁）避免幻读问题
在MySQL中,InnoDB引擎通过Next-Key Locking技术来解决幻读问题.幻读是一种事务并发问题,通常出现在Repeatable Read隔离级别下的范围查询操作中.幻读的现象是,事务在 ...
- 函数计算平台 OpenFunction 在自动驾驶领域的应用
嘉宾 | 霍秉杰 整理 | 王新 出品 | CSDN 云原生 2022 年 5 月 10 日,在 CSDN 云原生系列在线峰会第 4 期"ApacheSkyWalking 峰会"上 ...
- att&ack学习笔记6
att&ck攻击能力和防御能力的可量化可衡量的标准,是否防得住,是否检测的了,和同行的对比攻击行为(网络威胁分析,研究,行业报告)----->ATT&CK(对抗模型,对抗流程细分 ...
- SSIS连接Excel2007版本之后的数据源
今天我发现了新大陆,兴奋得不得了,由于原文写得太过详细与专业,我就偷偷懒直接Copy过来了,怕自己以后没地儿找,哈哈哈 原文链接:https://www.cnblogs.com/biwork/p/34 ...
- 使用最小二乘法进行线性回归（Python）
已知测得某块地,当温度处于15至40度之间时,数得某块草地上小花朵的数量和温度值的数据如下表所示.现在要来找出这些数据中蕴含的规律,用来预测其它未测温度时的小花朵的数量. 测得数据如下图所示: imp ...
- PHP Excel Word 文件转 HTML输出
ob_end_clean(); $filePath = './123.xls'; //$filePath = './123.docx'; $savePath = './123.html'; //这里记 ...
- 基于Java+SpringBoot+Mysql实现的快递柜寄取快递系统功能实现七
一.前言介绍: 1.1 项目摘要 随着电子商务的迅猛发展和城市化进程的加快,快递业务量呈现出爆炸式增长的趋势.传统的快递寄取方式,如人工配送和定点领取,已经无法满足现代社会的快速.便捷需求.这些问题不 ...