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引入的方式,那种 ...
随机推荐
- JCR分区 | 中科院SCI期刊分区表
LetPub查询系统,非常方便,分区影响因子都可以查询,还有投稿经验可以参考. SCI全称是Science Citation Index(科学引文索引) 科睿唯安JCR分区(Journal Citat ...
- tornado多进程模式不同进程写不同日志
#coding: utf- ''' Author: Time: Target: ''' import logging import logging.handlers import os import ...
- Nginx配置proxy_pass转发/路径问题
proxy_ignore_client_abort on; #不允许代理端主动关闭连接 upstream的负载均衡,四种调度算法 #调度算法1:轮询.每个请求按时间顺序逐一分配到不同的后端服务器,如果 ...
- Docker网络模式介绍
一.概述 docker的网络驱动有很多种方式,按照docker官网给出的网络解决方案就有6种,分别是:bridge.host.overlay.macvlan.none.Network plugins, ...
- conda进行python环境隔离
1.环境隔离的问题 在使用python时,常常遇到的问题: pip安装库A,依赖库B-2.1版本 pip安装库C,以来库B-3.1版本,安装会提示库B的版本冲突错误. 这种情况下就需要做环境隔离 co ...
- Is the docker daemon running?
原文 刚在新的Centos上安装Docker-CE,后运行docker run hello-world报错Cannot connect to the Docker daemon at unix:/// ...
- Java并发之等待/通知机制
目录 1 前言 1.1 先来段代码放松一下 2 Object wait()/notify() 2.1 一段入门代码 2.2 问题三连击 a.为什么官方说wait() 要放在while里面? b.为什么 ...
- 实现CI/CDk8s高可用集群搭建总结以及部署API到k8s
实现CI/CD(Centos7.2)系列二:k8s高可用集群搭建总结以及部署API到k8s 前言:本系列博客又更新了,是博主研究很长时间,亲自动手实践过后的心得,k8s集群是购买了5台阿里云服务器部署 ...
- mavn jar包依赖冲突解决
背景:使用maven很方便,但是引入冲突也很常见.后果很严重,各种不明实体找不到,所以需要对jar包的依赖有一个清晰的认识. 查看冲突 参考:用dependency:tree查看maven引入jar包 ...
- Centos 7.6 部署 Jumpserver 1.5.0
1.基础设置 # 版本说明 操作系统:centos7. jumpserver: # 升级所有包同时也升级软件和系统内核 yum update -y # selinux配置 setenforce sed ...