vue2.0 组件化及组件传值
2024-04-10 02:40:49
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
组件A写法：
<template>
<div class="componentA">
...
</div>
</template>
<script>
export default {
data () {
return {
msg: 'component-A',
}
}
}
</script>
<style>
</style>组件B写法：
<template>
<div class="message" id="componentB">
...
</div>
</template>
<script>
import Vue from 'vue'
export default Vue.component('my-component', {
template: '#componentB ',
data(){
return {
msg: 'component-B',
}
}
})
</script>
<style>
</style>在父组件component
分别引用挂载
<template>
<div>
<component-A></component-A>
<component-B></component-B>
</div>
</template>
<script>
import componentA from './component-a.vue';
import componentB from './component-b.vue'
export default {
data () {
return {
}
},
components:{
"component-A":componentA,
"component-B":componentB
}
}
</script>
<style>
</style>10.2组件间传值
对于简单的父子组件或是同属同一父组件的兄弟组件之间的通信，vue提供了方法,没必要用到vuex
10.2.1 父组件向子组件传值：
父组件：
<component-A :logo="logoMsg"></component-A> //logoMsg是父组件data里的值子组件：
<template>
<div class="componentA">
<div>{{logo}}</div>
</div>
</template>
...
data(){
}
props:["logo"],
...10.2.2子组件调用父组件方法并向父组件传值：
父组件：
<component-A :logo="logoMsg" @toParent="componenta"></component-A>
...
methods:{
componenta:function(data){ //data就是子组件传递过来的值
this.data1 = data
}
}子组件：
methods:{
toParent:function(){
this.$emit('toParent',this.data1) //调用父组件toParent方法，并传递参数
}
}效果图：
兄弟组件之间传值:在B组件修改父组件数据时。选择修改传给A组件的数据即可。
效果图：
10.2.3事件总线：不相关组件之间传递数据
bus.js文件：
import Vue from 'vue'
export default new Vue()组件B $emit触发事件:
import Bus from './bus.js'
...
byBus:function(){
Bus.$emit('byBus',this.byBusData)
}组件A $on接受事件传递数据
...
data(){
},
created(){
Bus.$on('byBus',(data)=>{
this.busData = data
})
},效果图：
最新文章
- ftp文件上传下载实用命令
- Java连接mysql数据库并插入中文数据显示乱码
- 用Myeclipse，包名上有小红叉(表示错误)，但是包中的类都是没有错误的+struts2继承ActionSupport时package前面出错
- mysql中left join ，right join 以及inner join 比较
- BFC学习笔记
- TCP/IP简介
- jquery index（）方法
- 《Python核心编程》 第八章 条件和循环
- oc-11-结构体
- unix 网路编程（卷一）第一个程序编译过程
- BZOJ 3996 [TJOI 2015] 线性代数 解题报告
- PHP 表单验证 - 完成表单实例
- python基础===使用switch方法，减少使用if语句
- JS之BOMBOM！
- ERROR: Got error reading packet from server: A slave with the same server_uuid/server_id as this slave has connected to the master
- Class.jsp
- 2--STM32+USB移植+HID 与AUDIO类MIDI设备组成的复合设备（原创）
- Subsequences in Substrings Kattis - subsequencesinsubstrings （暴力）
- sql语句-单表查询
- Docker 创建容器以及管理命令（三）