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. thinkphp 使用函数

    我们往往需要对模板输出变量使用函数,可以使用: 大理石平台支架 {$data.name|md5} 编译后的结果是: <?php echo (md5($data['name'])); ?> ...

  2. VC++ MFC文件的移动复制删除更名遍历操作

    1．判断文件是否存在 利用CFile类和CFileStatus类判断 CFileStatus filestatus; if (CFile::GetStatus(_T("d://softist ...

  3. hdu多校第一场1003 （hdu6580）Milk 背包

    题意: 有一个n*m的矩阵,左右可以随便走,但只能在每一行的中点往下走,每走一格花费时间1. 现在这个矩阵里放了k瓶牛奶,第i个牛奶喝下去需要ti时间 起点是(1,1) 对于每个i∈[1,k],问喝掉 ...

  4. oxyplot 禁止拖动，缩放

      <oxy:Plot> IsZoomEnabled= IsPanEnabled=/> IsZoomEnabled= IsPanEnabled=/> 关键代码: IsZoomE ...

  5. ArrayList 扩容

    处理容量是0, 第一次add的时候扩充到10 int newCapacity = oldCapacity + (oldCapacity >> 1); // 扩容50% 变成 1.5倍 第二 ...

  6. C# .net async await 学习

    async/await简单介绍 在处理比较耗时的操作(如图片处理.数据压缩.http请求等)传统的异步方法是直接使用Thread或者Task进行操作,在复杂的应用编写中可能会出现回调的问题,因此C#目 ...

  7. 一篇关于Matcher find方法深刻理解的文章

    文章目录 知识点 find find(int var1) reset group(int var1) 源码 故事是这样的 探索 问题解决 方法一: 方法二: 方法三: 总结 知识点 find 首先fi ...

  8. 17-7-es6作用域

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

  9. LeetCode 38.报数(Python3)

    题目: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作  "one 1& ...

  10. Luogu P2619 [国家集训队2]Tree I(WQS二分+最小生成树)

    P2619 [国家集训队2]Tree I 题意 题目描述 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有\(need\)条白色边的生成树. 题目保证有解. 输入输出格式 输入格式 ...