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引入的方式,那种 ...
随机推荐
- 转载【MySQL】MySQL5.X常用日志配置及5.7和5.6主从复制的区别
转载:https://blog.csdn.net/zyb378747350/article/details/78728886 2)MySQL5.7和5.6主从复制的区别: . 5.6之后默认binlo ...
- Python适合练手的项目
原文地址:https://www.jianshu.com/p/039156321e30 项目地址:https://github.com/DeqianBai/Python-Project/tree/ma ...
- grpc使用记录(二)简单同步服务实例
目录 1.编写proto文件,定义服务 2.编译proto文件,生成代码 3.编写服务端代码 server.cpp 代码 编译 4.编写客户端代码 client.cpp代码 5.简单测试一下 已经折腾 ...
- QT自定义信号和槽
最近项目中使用到QT,在此记录一下QT的核心,信号与槽: QObject::connect(const QObject *sender, const char *signal, const QObje ...
- 批量实现ssh免密登录
本节索引 场景分析 ssh免密登录 pssh工具批量管理 SHELL自动化脚本 本篇总结 场景分析 作为一个运维工程师,不是每个人工作的环境都想阿里.腾讯那样,动不动就上亿的PV量,上万台服务器.我们 ...
- 008_AuditionCC系列1
一.一二章编辑音频文件. (1)在音轨编辑页面,按鼠标滚轮或键盘上的+个-号可实现Zoom in(放大),Zoom out(缩小) (2)①次声波频率在<20Hz和>20000Hz之间②人 ...
- linux环境下安装python 3
说明: 在linux环境下,都默认安装python 2的环境,由于python3在python2的基础上升级较大,所以安装python 3环境用于使用最新的python 3的语法. 安装过程: 1.下 ...
- git解决error: The following untracked working tree files would be overwritten by checkout
在IDEA中进行分支切换时,出现如此错误,导致无法正常切换:error: The following untracked working tree files would be overwritten ...
- CVE-2019-16278-Nostromo Web Server远程代码执行
本文主题主要是分析CVE-2019-16278漏洞原因.漏洞如何利用以及为什么会受到攻击.这个CVE跟Nostromo Web服务器(又名nhttpd)有关,这个组件是在FreeBSD,OpenBSD ...
- GraphQL&DSL&API网关
车联网服务non-RESTful架构改造实践 导读 在构建面向企业项目.多端的内容聚合类在线服务API设计的过程中,由于其定制特点,采用常规的restful开发模式,通常会导致大量雷同API重复开 ...