父传子 : 子组件接收变量名=父组件传递的数据

如::f-cmsg="fmsg"  注意驼峰问题

子传父:@子组件关联的方法名 = 父组件接受的方法名

如:@func="getmsg"

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子组件相互传递数据</title>
<link rel="icon" sizes="any" href="../img/2.png" >
<!--<link rel="icon" sizes="any" href="../img/2.png">-->
<script type="text/javascript" src="../js/vue.js"></script>
<style type="text/css">
h4{
color: red;
}
</style>
</head>
<body>
<div id="box">
<p>父组件</p>{{fmsg}}<br/>
子组件传过来的元素:<h4>{{zCmsg}}</h4>
<!--父传子 :接受变量名 注意驼峰问题 :接收变量名=传递的数据 如::f-cmsg="fmsg"-->
<!--子传父:@关联方法名 = 接受方法名 如:@func="getmsg"-->
<re :f-cmsg="fmsg" @func="getmsg"></re>
</div>
<template id="t1">
<div>
<!--通过点击事件触发发送父标签的信息-->
<button @click="setmsg">发送给父组件的数据</button>
<p>子组件</p>{{zmsg}}<br/>
父组件传过来的元素:<h4>{{fCmsg}}</h4>
</div> </template>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
fmsg:"我是父标签的数据",
zCmsg:""
},
methods:{
//接受子数据的方法 括号中为传递过来的参数 ,个数由传递参数来决定
getmsg:function(m){
this.zCmsg=m;
},
},
//局部组件
components:{
re:{
template:"#t1",
//接受父标签传递过来的数据 【】中为传递过来的数据可直接使用
props:['fCmsg'],
data:function(){
return {
zmsg:"我是子标签的数据",
}
},
methods:{
//点击事件
setmsg:function(){
//this.$emit(关联方法,传递数据1...)
this.$emit("func",this.zmsg);
},
}
}
}
});
</script>
</body>
</html>

Vue.js 父子组件相互传递数据的更多相关文章

  1. vue组件-构成组件-父子组件相互传递数据

    组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信 ...

  2. vue 父子组件相互传递数据

    例子一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  3. vue.js 父子组件间 props 数据同步处理

    常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...

  4. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  5. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  6. vue组件父子组件之间传递数据

    举个栗子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

  8. vue.js父子组件通信动态绑定

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Vue.js父子组件如何传值 通俗易懂

    父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...

随机推荐

  1. FOI冬令营 Day1

    目录 T1.全连(fc) 传送门 Code  T2.原样输出(copy) 传送门 Code  T3.不同的缩写(diff) 传送门 Code  打算把省冬的题目放上来,主要是防止自己偷懒不订正 T1. ...

  2. codeforces#1120C. Compress String(dp+后缀自动机)

    题目链接: https://codeforces.com/contest/1120/problem/C 题意: 从前往后压缩一段字符串 有两种操作: 1.对于单个字符,压缩它花费$a$ 2.对于末尾一 ...

  3. ICEM rpl文件简要讲解【转载】

    转载自:http://blog.sina.com.cn/s/blog_90affd9801016xti.html 很多人问ICEM的rpl怎样录制的问题,为什么CFX调用时老是报错,这里开个帖子简单讲 ...

  4. IdentityServer4入门四:应用Implicit模式保护网站(上)

    我们先新增一个网站,名为“ClientMvc",也是asp.net core Web应用程序(模型视图控制器) 使用nuget安装以下引用 Microsoft.AspNetCore.Auth ...

  5. Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页

    首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...

  6. celery的介绍和在爬虫的中使用

    https://mp.weixin.qq.com/s/FzvZHQpF5mhV9t_HBzlcwg

  7. leetcode 143. Reorder List 、86. Partition List

    143. Reorder List https://www.cnblogs.com/grandyang/p/4254860.html 先将list的前半段和后半段分开,然后后半段进行逆序,然后再连接 ...

  8. [Java复习] 分布式事务 Part 2

    分布式事务了解吗?如果解决分布式事务问题的? 面试官心里: 只要聊到你做了分布式系统,必问分布式事务,起码得知道有哪些方案,一般怎么来做,每个方案的优缺点是什么. 为什么要有分布式事务? 分布式事务实 ...

  9. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_09-SpringSecurityOauth2研究-Oauth2密码模式授权

    密码模式(Resource Owner Password Credentials)与授权码模式的区别是申请令牌不再使用授权码,而是直接 通过用户名和密码即可申请令牌. 测试如下: Post请求:htt ...

  10. Linux -- 管理锁争用(翻译)

    在多线程应用中,程序员会使用互斥锁(mutex)来同步线程进入可访问共享资源的代码区域的行为.受这些锁保护的代码区域被称为关键代码段(Critical Section).如果关键代码段中已存在一个线程 ...