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引入的方式,那种 ...
随机推荐
- Python示例项目学习
原文地址:http://www.360doc.com/showweb/0/0/874025604.aspx 「 Python3 实现火车票查询工具 」 相信很多人学Python都是冲着它强大的爬虫 ...
- 一个android任务提醒程序
需求: 运行建立多个提醒,每个提醒设置一个时间,到达指定时间后跳出提醒窗体 每个提醒有一个执行按钮,点击后保存执行记录,并且当天不再触发提醒窗体 提醒出现后如果任务还没执行,那么需要在30分钟后再次提 ...
- Gossip和Redis集群原理
https://blog.csdn.net/weixin_33755847/article/details/89561666 http://redisbook.com/preview/cluster/ ...
- spring cloud java: 无法访问redis.clients.jedis.JedisPoolConfig 找不到redis.clients.jedis.JedisPoolConfig的类文件
spring cloud <spring-cloud.version>Greenwich.SR3</spring-cloud.version> 注入Redis 时候: @Bea ...
- 今天使用Jmeter时遇到的几个问题及解决方法
JDBC Request :Cannot load JDBC driver class 'com.mysql.jdbc.Driver'解决办法 在Jmeter中run JDBC Request时,收到 ...
- jzy3D从入门到弃坑_2使用jzy3D0.9画2D散点图
jzy3D从入门到弃坑_2 使用jzy3D0.9画2D散点图 觉得有用的话,欢迎一起讨论相互学习~Follow Me 在上一节中安装jzy3D 0.9版本并且运行了3D的例子 https://blog ...
- Flutter入门（二）
* 网格布局 class HomeContent extends StatelessWidget { List<Widget> _getListData() { var tempList ...
- Ubuntu16.04安装CDH
官方参考文档: https://www.cloudera.com/documentation/enterprise/5-15-x/topics/configure_cm_repo.html 安装cdh ...
- 〓经典文字MUD武侠游戏 我的江湖 〓
〓经典文字MUD武侠游戏 我的江湖 〓 我的江湖(FFLIB)基于地狱内核扩展,目前已扩展了很多实用功能! 我的江湖玩法 和掌心西游.书剑.东方故事.侠缘.武林等玩法大同小异 但扩展了更多好玩的玩法, ...
- rxjs debounceTime减少搜索的频率
debounceTime用来降低事件的触发频率 ,接收以毫秒为单位的参数 它所做的操作是,在一定时间范围内不管产生了多少事件,它只放第一个过去,剩下的都将舍弃 html: <div class= ...