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

如：: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. 胜利点 选题 Scrum立会报告+燃尽图 02

    此作业要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8683] 一.小组介绍 组长:贺敬文 组员:彭思雨 王志文 位军营 杨萍 ...

  2. [微信小程序]实现一个自定义遮罩层

    正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bindtap="showview">Show</button ...

  3. OpenJudge计算概论-人民币支付

    /*========================================================== 人民币支付 总时间限制: 1000ms 内存限制: 65536kB 描述 从键 ...

  4. yarn 单点故障 重启 ResourceManger Restart

    http://hadoop.apache.org/docs/stable/hadoop-yarn/hadoop-yarn-site/ResourceManagerRestart.html Featur ...

  5. python 设计模式之中介者模式

    #先啰嗦一下 至少半个多月的样子没写博客了,月初去了趟黄山,赏了美景,自然没时间也没条件敲博客了,一个多星期就这么过去了.返回深圳后,工作积压了一堆,然后白天就马不停蹄的忙工作,晚上回家伺候小娃,又想 ...

  6. <HTML/CSS>BFC原理剖析

    本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...

  7. ctl +→ = MAC 触控板三指手势

    我只想发一个这个:一直用外接显示器,但是不舍得抛弃全屏程序的切换,即:触控板三指手势. 期间各种百度无果,最多找到出最多的是触发角: 今天终于发现了:ctl +→  =  MAC 触控板三指手势 (外 ...

  8. Vue.js学习之简介（待续）

    Vue.js 渐进式JavaScript 框架 易用:已经会了 HTML.CSS.JavaScript?即刻阅读指南开始构建应用! 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. ...

  9. 算法习题---3.12浮点数（UVa11809）

    一:题目 尴尬的非会员水印 二:题目摘要 1.int和float比较 int共32位,可以表示的最大的数为2^32次方 float虽然也是32位,但是是以指数形式保存,指数占8位(含符号),最大127 ...

  10. CDS视图篇 1

    CDS视图概览 CDS是Core Data Services的简称,是HANA数据库向上层ABAP应用层提供数据的一种高效的方式,CDS模型是基于数据库data definition language ...