1.父向子传递数据

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

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

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

  1. <body>
  2.         <div id="app">
  3.             <comp1 :parentmsg="msg"></comp1>
  4.         </div>
  5.  
  6.         <template id="tmpl1">
  7.             <div>
  8.                 <h1>这是子元素--{{parentmsg}}</h1>
  9.             </div>
  10.         </template>
  11.         <script>
  12.             var comp1 = {
  13.                 template: '#tmpl1',
  14.                 props: ['parentmsg'],
  15.             }
  16.             var vm = new Vue({
  17.                 el: '#app',
  18.                 data: {
  19.                     msg: '我是父组件中的数据',
  20.                 },
  21.                 components: {
  22.                     comp1
  23.                 }
  24.             })
  25.         </script>
  26.     </body>

2.子向父传递数据

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

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

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

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

  1. <body>
  2.         <div id="app">
  3.             <comp1 :parentmsg="msg" @func="getMsgFromSon"></comp1>
  4.             <h1>{{msgSon}}</h1>
  5.         </div>
  6.  
  7.         <template id="tmpl1">
  8.             <div>
  9.             <h1>这是子元素</h1>
  10.             <input type="button" value="向父组件传递消息"  @click="sendMsg"/>
  11.             </div>
  12.         </template>
  13.         <script>
  14.             var comp1 = {
  15.                 template: '#tmpl1',
  16.                 props:['parentmsg'],
  17.                 data(){
  18.                     return{
  19.                         msg:'我是子组件中的数据'
  20.                     }
  21.                 },
  22.                 methods:{
  23.                     sendMsg(){
  24.                         this.$emit('func',this.msg)
  25.                     }
  26.                 }
  27.             }
  28.             var vm = new Vue({
  29.                 el: '#app',
  30.                 data: {
  31.                     msg:'我是父组件中的数据',
  32.                     msgSon:''
  33.                 },
  34.                 methods: {
  35.                     getMsgFromSon(data){
  36.                         this.msgSon=data
  37.                     }
  38.                 },
  39.                 components: {
  40.                     comp1
  41.                 }
  42.             })
  43.         </script>
  44.     </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. duilib库分析3.DUILibxml配置

    我这里是借用网友colin3dmax整理的关于duilib的分析哈,感谢他的分享,我觉得很有必要贴出来让大家都学习观摩下 DUILibxml配置项根节点        子类      属性       ...

  2. php开发面试题---面试常用英语（你能介绍你自己吗？）

    php开发面试题---面试常用英语(你能介绍你自己吗?) 一.总结 一句话总结: Could you please describe yourself? 1.为什么觉得自己适合这份工作? Why do ...

  3. 同步异步，异步回调，线程队列，线程时间Event

    同步异步-阻塞非阻塞 阻塞-非阻塞 指的是程序的运行状态 阻塞:当程序执行过程中遇到了IO操作,在执行IO操作时,程序无法继续执行其他代码,称为阻塞. 非阻塞:程序在正常运行没有遇到IO操作,或者通过 ...

  4. 2017/7/26 SCJP英语学习

    1 Declarations and Access Control ............... 1 Java Refresher . . . . . . . . . . . . . . . . . ...

  5. requests 返回 521

    网页端抓数据免不了要跟JavaScript打交道,尤其是JS代码有混淆,对cookie做了手脚.找到cookie生成的地方要费一点时间. 那天碰到这样一个网页,用浏览器打开很正常.然而用request ...

  6. 海量可视化日志分析平台之ELK搭建

    ELK是什么? E=ElasticSearch ,一款基于的Lucene的分布式搜索引擎,我们熟悉的github,就是由ElastiSearch提供的搜索,据传已经有10TB+的数据量. L=LogS ...

  7. 连接 MySQL 报错：Lost connection to MySQL server at 'reading authorization packet', system error: 34

    报错信息: Lost connection to MySQL server at 解决方案: use mysql; ; flush privileges; 参考: https://blog.csdn. ...

  8. JS规则 较量较量(比较操作符) 两个操作数通过比较操作符进行比较，得到值为真（true）和假(false)。【>; <; >=; <=; !=;==】

    较量较量(比较操作符) 我们先来做道数学题,数学考试成绩中,小明考了90分,小红考了95分,问谁考的分数高? 答: 因为"95 > 90",所以小红考试成绩高. 其中大于号& ...

  9. WPF 免费控件库

    https://github.com/Infragistics/InfragisticsThemesForMicrosoftControls 几款WPF免费控件库,不过运行源码时需要下载三个DLL , ...

  10. day1-字符串、列表

    字符串操作: name = "Wills Qian" # 创建字符串变量 print(len(name)) # 打印字符串长度 print(name[0]) # 提取第一个字符W ...