1.父向子传递数据

1>定义一个父组件和一个子组件

2>父组件通过v-bind绑定传递的数据  :parentmsg="msg"

3>子组件需要通过 props:['']来接收数据 props: ['parentmsg'],

<body>

        <div id="app">

            <comp1 :parentmsg="msg"></comp1>

        </div>

        <template id="tmpl1">

            <div>

                <h1>这是子元素--{{parentmsg}}</h1>

            </div>

        </template>

        <script>

            var comp1 = {

                template: '#tmpl1',

                props: ['parentmsg'],

            }

            var vm = new Vue({

                el: '#app',

                data: {

                    msg: '我是父组件中的数据',

                },

                components: {

                    comp1

                }

            })

        </script>

    </body>

2.子向父传递数据

1>子组件通过一个触发一个事件来调用向父组件传递数据的方法  @click="sendMsg"

2>通过  this.$emit('func',this.msg) 传递数据给父组件   来调用父组件上绑定的方法  @func="getMsgFromSon"

3>通过方法拿到子组件传递过来的数据

methods: {
                    getMsgFromSon(data){
                        this.msgSon=data
                    }
                },

<body>

        <div id="app">

            <comp1 :parentmsg="msg" @func="getMsgFromSon"></comp1>

            <h1>{{msgSon}}</h1>

        </div>

        <template id="tmpl1">

            <div>

            <h1>这是子元素</h1>

            <input type="button" value="向父组件传递消息"  @click="sendMsg"/>

            </div>

        </template>

        <script>

            var comp1 = {

                template: '#tmpl1',

                props:['parentmsg'],

                data(){

                    return{

                        msg:'我是子组件中的数据'

                    }

                },

                methods:{

                    sendMsg(){

                        this.$emit('func',this.msg)

                    }

                }

            }

            var vm = new Vue({

                el: '#app',

                data: {

                    msg:'我是父组件中的数据',

                    msgSon:''

                },

                methods: {

                    getMsgFromSon(data){

                        this.msgSon=data

                    }

                },

                components: {

                    comp1

                }

            })

        </script>

    </body>

vue.js_09_vue-父子组件的传值方法的更多相关文章

  1. vue中非父子组件的传值bus的使用

    非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定 ...

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

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

  3. 关于Vue中父子组件相互传值

    Header为子组件,Home为父组件,通过子组件调用父组件 运行结果如下 下面是父组件调用子组件的案例 通过button按钮的click事件 图一是父组件Home中的run方法,图二是msg和fun ...

  4. Vue父子组件相互传值及调用方法的方案

    Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...

  5. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  6. vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  7. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  8. Vue中非父子组件传值的问题

    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...

  9. vue.js单文件组件中非父子组件的传值

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...

随机推荐

  1. 1002CSP-S模拟测试赛后总结

    晚上 我死了.T1全场AC只有我爆零了?? 还非常中二地写了个代码注释: 水题不假,但你不知道题水你更水么?? 碰到简单题就掉以轻心??还告诉自己不要掉以轻心…… 这下是真的滑天下之大稽了吧. 读题不 ...

  2. 尚学linux课程---9、yum相关操作和知识

    尚学linux课程---9.yum相关操作和知识 一.总结 一句话总结: 如何使用比如163,阿里云给yum配置yum源:去官网,不要百度:直接去官网,有帮助文档的(比如centos的就在centos ...

  3. 转：Linux环境下段错误的产生原因及调试方法小结

    源地址:http://www.cnblogs.com/panfeng412/archive/2011/11/06/2237857.html 补充:http://baike.baidu.com/link ...

  4. 解决div设置浮动，高度消失

    给包围 浮动的层 加清除浮动样式,样式要兼容的用下面的代码.clearfix {*zoom:1; clear:both;}.clearfix:after{content:".";d ...

  5. 总结windows cmd 查看进程，端口，硬盘信息

    1.查看window所有进程 tasklist 2.查看windows所占用的进程号 tasklist|findstr 1916 3.杀死进程,进程pid taskkill /f /pid 10156 ...

  6. Linux操作系统系列-Linux发布Web项目

    安装JDK 下载jdk 验证是否安装JDK java 如果已经安装了jdk查看已经安装的版本 java -version 如果安装不是所需要的 卸载当前java SDK 通过rpm查看已经安装包 (r ...

  7. 编写Map处理逻辑

  8. MapReduce模型简介

  9. win7 删除多余启动项的方法

    win7已经没有像xp那么简单的boot.ini让我们修改了,取而代之的是bcdedit.现在就简单的说下bcdedit的常规应用吧.开始,运行,输入bcdedit /?可以看到帮助.简单的应用开始. ...

  10. https://webpack.js.org/plugins/

    有问题还是看源码 ,看官方文档吧,整一晚上终于整明白了