Vue父子，子父，非父子组件之间传值
Vue组件基础
纯属随笔记录，具体详细教程，请查阅vue.js网站
子组件给父组件传值:
<body>
<div id="app">
<my-app></my-app>
</div>
</body>
<template id="appTem">
<div>我是---{{ msg }}
<my-banner @lalala='getData'></my-banner>
</div>
</template>
<template id="bannerTem">
<div>我是---
<button @click='setData'>这里是轮播图banner</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义一个组件
const Banner = {
template: '#bannerTem',
methods: {
setData() {
this.$emit('lalala', '我是子组件my-banne的值')
}
},
}
//定义一个组件
const App = {
template: '#appTem', //提取组件中的模板
data() { //组件的data是一个函数，返回的是一个对象
return {
msg: '头部组件',
a: 212
}
},
components: {
'my-banner': Banner,
},
methods: {
getData(str) {
console.log(str);
}
}
}
const app = new Vue({
el: '#app',
// data:{
// },
components: {
'my-app': App
}
})
</script>
父组件给子组件传值:
<body>
<div id="app">
<my-heade></my-heade>
</div>
</body>
<template id="headeTm">
<div>
我是heade组件
<my-banner :bar='msg'></my-banner>
</div>
</template>
<template id="bannerTm">
<div>
我是banner组件
{{ bar }}
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义一个banner组件
const Banner = {
template: '#bannerTm',
props: {
bar: {
type: String
}
}
}
//定义一个heade组件
const Heade = {
template: '#headeTm',
components: {
'my-banner': Banner
},
data() {
return {
msg: '我是父组件的值'
}
}
}
const app = new Vue({
el: '#app',
components: {
'my-heade': Heade
}
})
</script>
非父子组件间传值：
<body>
<div id="app">
<my-app></my-app>
</div>
</body>
<template id="appTm">
<div>我是最外面的app
<my-banner></my-banner>
<my-bannerindex></my-bannerindex>
</div>
</template>
<template id="bannerTm">
<div>
这里是banner
<button @click='getIndex(1)'>1</button>
<button @click='getIndex(2)'>2</button>
<button @click='getIndex(3)'>3</button>
<button @click='getIndex(4)'>4</button>
</div>
</template>
<template id="barindexTm">
<div>
{{ index }}
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//中央事件总线，也就是实例化一个Vue
const bus=new Vue();
const BarIndex={
template:'#barindexTm',
data(){
return{
index:''
}
},
mounted() {
// 2、监听事件
that=this;
bus.$on('changeIndex',function(index){//(index)=>{this.index=index}
// console.log(index);
that.index=index;
})
},
}
const Banner={
template:'#bannerTm',
methods: {
getIndex(value){
bus.$emit('changeIndex',value)
}
},
}
const App={
template:'#appTm',
components:{
'my-banner':Banner,
'my-bannerindex':BarIndex
}
}
const app =new Vue({
el:'#app',
components:{
'my-app':App
}
})
</script>
Vue父子，子父，非父子组件之间传值的更多相关文章
- vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- 4-react 组件之间传值。
1.传值: 都是使用props和state结合得方式进行组件之间得传值 再react中传值得话是父子组件之间得传值,一般会把父组件中得state值通过props传给子组件,再子组件中使用props进行 ...
- 从0开始探究vue-组件化-组件之间传值
理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...
- react 组件之间传值
谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...
- react组件之间传值方式
1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...
- vue.js 创建组件 子父通信 父子通信 非父子通信
1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
随机推荐
- JVM探究之 —— 垃圾回收（二）
1. 垃圾收集算法 1.1 标记清除(Mark-Sweep)算法 标记—清除算法是第一种使用和比较完善的垃圾回收算法,后续的收集算法都是基于其设计思路并对其不足进行改进而得到的. 该算法分为“标记”和 ...
- 批量kill掉包含某个关键字的进程
需要把 linux 下符合某一项条件的所有进程 kill 掉,又不能用 killall 直接杀掉某一进程名称包含的所有运行中进程(我们可能只需要杀掉其中的某一类或运行指定参数命令的进程),这个时候我们 ...
- vue-devtools 获取到 vuex store 和 Vue 实例的？
vue-devtools 获取到 vuex store 和 Vue 实例的? https://github.com/vuejs/vue-devtools 安装了 vue-devTools ...
- SNF快速开发平台2019-权限管理模型简介-权限都在这里
1.1 权限的概念 权限是指为了保证职责的有效履行,任职者必须具备的,对某事项进行决策的范围和程度.它常常用“具有批准……事项的权限”来进行表达.例如,具有批准预算外5000元以内的礼品费支出的 ...
- 002-Python3-基础语法-赋值、显示类型、数据类型[数值、字符串、列表、元祖、集合、字典]
一.基础语法 参看地址:https://www.runoob.com/python3/python3-tutorial.html 基础数据类型 Python 中的变量不需要声明.每个变量在使用前都必须 ...
- ShoeBox一个超级好用的图片切割工具
下载地址:http://renderhjs.net/shoebox/ ShoeBox是一个图片处理软件,体积很小. 我主要用第三个功能拆开图片.根据大图上的小图空白间隙来处理的. 导出后变成很多小图
- 【452】pandas筛选出表中满足另一个表所有条件的数据
参考:pandas筛选出表中满足另一个表所有条件的数据 参考:pandas:匹配两个dataframe 使用 pd.merge 来实现 on 表示查询的 columns,如果都有 id,那么这是很好的 ...
- java Random 抢红包算法
红包有一个总金额和总数量,领的时候随机分配金额. 维护一个剩余总金额和总数量,分配时,如果数量等于1,直接返回总金额,如果大于1,则计算平均值,并设定随机最大值为平均值的两倍,然后取一个随机值,如果随 ...
- 【ARM-Linux开发】ARM嵌入式设备Linux系统启动步骤和方式
1). 简介 本文简单介绍ARM嵌入式设备基于嵌入式Linux操作系统时候的启动步骤和启动方式, 区别与X86平台,ARM平台下并没有一个标准的启动步骤,不同ARM SoC都会使用各自定义的boot ...
- Android EditText禁止回车换行
在做一个登录页面的时候,发现了输入手机号的EditText可以输入回车的bug,影响用户体验,在此分享下解决办法. 百度了很多,都是设置singline=true的或者设置maxLines=" ...