【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) 是一套构建用户界面的渐进式 ...
随机推荐
- 完美转发（模板）--T&&
在C++模板编程中,完美转发(Perfect Forwarding)是一种技术,旨在保留函数参数的值类别,即在将参数传递到另一个函数时,无论参数是左值还是右值,都能够保持它的原始性质,而不会因为转发丢 ...
- android IO Prefetch源码分析
I/O Prefetcher是高通本身提供的一套优化方案,可以用在Android手机App冷启动的时候.本文基于android Q 主要分libqti-iopd.vendor.qti.hardware ...
- 前端 面试 html css 如何让一个盒子水平垂直居中？
方法1 使用子绝父相 定位 推荐 说明: 让父元素相对定位,因为要让子元素以父元素为参考对象,如果父元素不设置定位,子元素的参考对象就是整个页面document: 子元素绝对定位,top:50%: ...
- 【信创问题】解决东方通(TongWeb)报错 java.lang.NoClassDefFoundError: javax/persistence/spi/PersistenceProvider
写在前边 今天帮现场同事定位问题,情况是项目同事使用东方通(TongWeb7.0)部署公司项目时,出现以下报错导致服务启动失败. 简单排查了下发现:war包内WEB-INF/lib/javax.per ...
- Java面试题（持续更新中...）
事务的四大特性 原子性,隔离性,持久性,一致性 事务的隔离级别和现象 读未提交:可能产生脏读,读取到未提交的数据 读已提交:可能产生不可重复读取问题,A事务中读取到B事务已提交的数据,导致两次读取数据 ...
- hydra爆破工具
hydra爆破工具 命令详细: 1.破解ssh: hydra -l 用户名 -p 密码字典 -t 线程 -vV -e ns ip ssh hydra -l 用户名 -p 密码字典 -t 线程 -o s ...
- Nuxt.js 应用中的 pages：extend 事件钩子详解
title: Nuxt.js 应用中的 pages:extend 事件钩子详解 date: 2024/10/25 updated: 2024/10/25 author: cmdragon excerp ...
- npoi2.3+泛型+反射 根据配置统一解析excel数据到实体的基础方法
解析方法: /// <summary> /// excel数据解析到实体 /// </summary> /// <typeparam name="T" ...
- jsp页面访问数据库根据数据情况，定时弹出提醒
需求:根据数据库情况,在页面定时弹出相应的消息 实现: 1. 展示DIV设置 <script language="javascript" type="text/ja ...
- 第八届御网杯线下赛Pwn方向题解
由于最近比赛有点多,而且赶上招新,导致原本应该及时总结的比赛搁置了,总结来说还是得多练,因为时间很短像这种线下赛,一般只有几个小时,所以思路一定要清晰,我还是经验太少了,导致比赛力不从心,先鸽了~ S ...