a.父组件向子组件传值
data(){},props数据区别
data中的数据可读可写,是自己的数据
props是个数组,中的数据是父组件传递过来的,只读不能写
<login :dmsg='msg'></login> 父组件向自定义的子组件中传值
var myvue = new Vue({
  el:"#myvue",
  data:{
    flag:'reg',
    msg:'这是父组件'
  },
  methods:{
  },
  components:{
    login:{
      template:'<h2>这是子组件---{{dmsg}}</h2>',
      props:['dmsg'] 子组件定义父组件的传值
      data(){
        return {
          smsg:'这是子组件的自有值'
          }
       }
      }
    }
})
b.子组件调用父组件方法并向父组件传值
<div id="myvue">
  <login :dmsg='msg' @dshow='show'></login> @dshow='show'是父组件方法传递
</div>

<script>
var myvue = new Vue({
  el:"#myvue",
  data:{
    flag:'reg',
    msg:'这是父组件',
    dmsg:null,
  },
  methods:{
    show(data){
    this.dmsg = data
  }
},
  components:{
    login:{
      template:'<div><h2>这是子组件---{{dmsg}}---{{smsg}}</h2><input type="button" name="" id="" value="大按钮" @click="myshow"/></div>',
      props:['dmsg'],
      methods:{
        myshow(){
          this.$emit('dshow',this.smsg) $emit是触发的意思,触发传递过来的方法并传递数据给父方法赋值
    },
},
  data(){
    return {
      smsg:'这是子组件的自有值'
    }
  }
}
}
})
</script>

ref 调用DOM组件和自定义组件,及自定义组件的值和方法,可以实现父组件调用子组件方法
<div id="myvue">
  <h3 ref='myref'>今天天气真好</h3>
  <input type="button" name="" id="" value="获取元素" @click="show"/>
  <login ref='refh2'></login>
</div>

<template id="tmp">
  <h2>今天天气不好</h2>
</template>

var myvue = new Vue({
  el:"#myvue",
  data:{

    },
  methods:{
    show:function(){
      this.$refs.refh2.sshow()
    }
  },
  components:{
    login:{
      template:'#tmp',
      methods:{
      sshow(){console.log('子组件方法')}
    },
  data(){
    return {msg:'哈哈哈'}
}
}
}
})

「Vue」父子组件之间的传值及调用方法的更多相关文章

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

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

  2. vue 非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Vue非父子组件之间的传值

    1.新建一个js文件  然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...

  4. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

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

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

  6. 浅谈vue父子组件之间的传值

    前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...

  7. vue 学习五 深入了解components(父子组件之间的传值)

    上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 // ...

  8. VUE 父子组件之间通信传值 props和 $emit

    1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件          <div id="app" >               <tr ...

  9. vue之父子组件之间的通信方式

    (一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--&g ...

随机推荐

  1. 微信小程序之分享或转发功能(自定义button样式)

    小程序页面内发起转发 通过给 button 组件设置属性open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage 事件,如果当前页 ...

  2. jvm系列(八):jvm知识点总览

    在江湖中要练就绝世武功必须内外兼备,精妙的招式和深厚的内功,武功的基础是内功.对于武功低(就像江南七怪)的人,招式更重要,因为他们不能靠内功直接去伤人,只能靠招式,利刃上优势来取胜了,但是练到高手之后 ...

  3. LeetCode Container With Most Water (Two Pointers)

    题意 Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai ...

  4. 使用Fidder从安卓模拟器获取APP内H5游戏网址

    大家都知道H5游戏其实是网页,但是有些APP或者微端不显示网址链接.这里给大家介绍介绍一种,利用Fiddler进行抓包,获取APP打开的网址的方法.有人说何必多此一举呢,直接用模拟器玩游戏就好了.的确 ...

  5. Linux内核实验作业六

    实验作业:分析Linux内核创建一个新进程的过程 20135313吴子怡.北京电子科技学院 [第一部分]阅读理解task_struct数据结构 1.进程是计算机中已运行程序的实体.在面向线程设计的系统 ...

  6. NPM和Yarn添加淘宝镜像

    NPM设置淘宝镜像 1.查询当前配置的镜像 npm get registry > https://registry.npmjs.org/ 设置成淘宝镜像 npm config set regis ...

  7. ElasticSearch 2 (7) - 基本概念

    ElasticSearch 2 (7) - 基本概念 摘要 ElasticSearch的一些基本核心概念,理解这些概念有助于ElasticSearch的学习 准实时NRT(Near Realtime) ...

  8. image 样式设置

    .image-fluid:响应式大小 .image-thumbnails:照片四周会出现一个1px宽的边框 .figure:用于<figure>标签,用来标记一个图像 .figure-ca ...

  9. nodemoduleOfCheerio

    https://www.npmjs.com/package/cheerio 这是npm的api说明 英文好的同学可以去看看. cheerioAPI 是一个用来操作jsDOM的模块: 就像jQuery一 ...

  10. git 客户端连接gitlab 实现简单的CI/CD

    1. git 客户端的安装 下载: https://git-scm.com/download/win 截至最近:20180728最新版本 2.18的下载地址 https://github-produc ...