Vue组件基础--简单了解vue组件
Vue组件基础–简单了解vue组件
Vue组件是什么?
组件就像是提前做好的模具,使用时拿出来就行,可以重复调用,它跟普通的Vue有一样的属性:
- data (数据存放)
- computed(计算属性)
- watch(监听属性)
- methods(方法存放)
熟悉的人应该看出来了,组件并没有el属性,组件没有根节点相关的属性。
组件的data必须是一个函数,这样多个组件才不会相互影响。
data: function () {
return {
count: 0
}
}
组件可以通过Prop 对子组件进行传值,可以使用v-bind动态传递prop的数据
<div id="app">
<my-p v-for="item in list"
:title="item.title"><!-- 使用v-bind(:)动态传递prop -->
</my-p>
</div>
Vue.component('my-p',{
props:['title'], //props向子组件传递数据
template:'<p>{{title}}</p>'
})
new Vue({
el:"#app",
data:{
list:[
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
组件的监听子组件事件
主要通过子组件的 $emit 方法并传入事件名触发事件 e m i t 可 以 使 用 第 二 个 参 数 向 上 抛 值 , 监 听 的 父 组 件 通 过 emit可以使用第二个参数向上抛值,监听的父组件通过 emit可以使用第二个参数向上抛值,监听的父组件通过event获取
<div id="app">
<div :style="{fontSize:size + 'px'}"> <!-- 字体大小通过size动态获取 -->
<my-p v-for="item in list"
:title="item.title"
@addsize="size += $event"> <!-- $event获取子组件通过$emit抛的值 -->
</my-p>
</div>
</div>
Vue.component('my-p',{
props:['title'], //props向子组件传递数据
template:`<div>
<p>{{title}}</p>
<button @click="$emit('addsize',10)">点击放大</button>
</div>`
//子组件通过 $emit 方法并传入事件名触发事件
//$emit可以使用第二个参数向上抛值,监听的父组件通过$event获取
})
new Vue({
el:"#app",
data:{
list:[
{ id: 1, title: '这是第一个' },
{ id: 2, title: '这是第二个' },
{ id: 3, title: '这是第三个' }
],
size:14
}
})
组件中v-model的实现
当input事件触发时,通过$emit对数据进行抛出
<div id="app">
<!-- 组件中v-model的使用 -->
<my-input v-model="myText"></my-input>
<p>{{myText}}</p>
</div>
Vue.component('my-input', {
props: ['value'],//通过props动态数据传递
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
`
// input事件触发时,通过$emit对数据进行抛出
})
new Vue({
el:"#app",
data:{
myText:''
}
})
动态组件
通过:is实现tab切换效果
<div id="app">
<button
v-for="item in list"
@click="currList = item">{{item}}</button>
<!-- 通过点击的item给currList赋值 -->
<component :is="curr"></component>
<!-- 通过:is="curr"的curr值进行组件的切换 -->
</div>
Vue.component("my-div", {
template: "<div>Home component</div>"
});
Vue.component("my-div2", {
template: "<div>Posts component</div>"
});
new Vue({
el:"#app",
data:{
list:['div','div2'],
currList:'div'
},
computed:{
curr: function() {
return "my-" + this.currList;
//修改组件的curr值改变组件的显示
}
}
})
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 你必须掌握动态规划——LeetCode题目5:最长回文子串
- 有意思的难题——LeetCode题目37:解数独
- 源码分析-分布式链路追踪:Skywalking存储插件能力-elasticsearch
- mongodb 4.0副本集搭建
- 浅析Kubernetes Pod重启策略和健康检查
- SpringBoot2 整合Ehcache组件,轻量级缓存管理
- 数据源管理 | 分布式NoSQL系统,Cassandra集群管理
- 【NPM库】- 0x03 - Express
- 数值微分|多项式的导数计算
- 让windows 10 内置ubuntu(WSL)成为扩增子分析生产力
- 手把手教你自定义Spring Boot Starter
- 高职考技能提升教程013期 冒泡排序法和选择排序法
- python带你剪辑视频
- python自制有声小说
- CVE-2017-8570及利用样本分析