【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) 是一套构建用户界面的渐进式 ...
随机推荐
- vue 赶鸭子上架入门笔记（一） 安装开发环境
准备接手一个 vue 的前端项目,从零开始学习 vue.目标不高大上,能看得懂代码,能进行简单的修改,改完能打包和部署. 首先解决 vue 开发环境的准备.访问 Node.js 官方网站,下载适合你操 ...
- 国产OS 中标麒麟下 C# 桌面应用开发环境搭建笔记
1.中标麒麟 7.0 x86 桌面版 默认安装创建用户时,如果没勾选 root 用户使用相同的口令,那么安装完成以后,root 是没有设置口令的,通过 sudo passwd root 输入当前普通用 ...
- 2022年7月中国数据库排行榜：墨天轮榜单榜眼易主，PolarDB得分涨幅最大
信创元年,后起之秀,大有可为.2022年7月的 墨天轮中国数据库流行度排行榜 风起云涌,本月排行榜共有232个数据库参与排名,相比上月,新增 ShuangzhaoDB 数据库.榜单前十名的唯一变化是达 ...
- 区分::after和:before中的单冒号和双冒号的作用
单冒号:一般指的是伪类,如鼠标悬停状态设置样式:选择器:hover {设置样式} 双冒号一般指伪元素,给元素的前面/后面添加内容.内容数据按堆栈数据结构存储.
- js的作用域有哪些 and 他们的特点
全局作用域:是所有代码的执行环境,比如script标签里所有的代码 或 独立的js 文件: 局部作用域:是函数内部代码的执行环境: 块级作用域:是 {} 内的代码执行环境:
- MySQL下载安装教程
下载 https://www.mysql.com/downloads/
- Kubernetes 集群中流量暴露的几种方案
作者:KaliArch(薛磊),某 Cloud MSP 服务商产品负责人,熟悉企业级高可用 / 高并发架构,包括混合云架构.异地灾备,熟练企业 DevOps 改造优化,熟悉 Shell/Python/ ...
- Java 线程池获取池中所有线程列表的方法
在Java中,获取线程池中所有线程列表并不是一个直接支持的功能,因为线程池的设计通常是为了隐藏和管理底层的线程细节,从而提供更高层次的抽象和并发控制能力.然而,通过一些反射和技巧,我们仍然可以获取到线 ...
- 黑神话：悟空电脑太卡？配置不够？ToDesk云电脑入门新手教程
许多玩家在玩<黑神话:悟空>时会遭遇硬件配置不足导致的游戏卡顿.画面不流畅等问题. 其实这个难题很好解决,用ToDesk云电脑即可迎刃而解.即使你的本地电脑配置不高,也能享受到流畅的游戏体 ...
- 大疆消费级无人机调参软件 Assistant 2 与模拟器
0 大疆消费级无人机调参 Assistant 2 无人机调参软件常用来为无人机的某些参数做校准.大疆的无人机调参软件分为行业级版和消费级版. 行业级版本基本为每个适配机型都添加了与之对应的模拟器功能. ...