「Vue」父子组件之间的传值及调用方法
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」父子组件之间的传值及调用方法的更多相关文章
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue 非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- 浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...
- vue 学习五 深入了解components(父子组件之间的传值)
上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 // ...
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- vue之父子组件之间的通信方式
(一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--&g ...
随机推荐
- 微信小程序之分享或转发功能(自定义button样式)
小程序页面内发起转发 通过给 button 组件设置属性open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage 事件,如果当前页 ...
- jvm系列(八):jvm知识点总览
在江湖中要练就绝世武功必须内外兼备,精妙的招式和深厚的内功,武功的基础是内功.对于武功低(就像江南七怪)的人,招式更重要,因为他们不能靠内功直接去伤人,只能靠招式,利刃上优势来取胜了,但是练到高手之后 ...
- LeetCode Container With Most Water (Two Pointers)
题意 Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai ...
- 使用Fidder从安卓模拟器获取APP内H5游戏网址
大家都知道H5游戏其实是网页,但是有些APP或者微端不显示网址链接.这里给大家介绍介绍一种,利用Fiddler进行抓包,获取APP打开的网址的方法.有人说何必多此一举呢,直接用模拟器玩游戏就好了.的确 ...
- Linux内核实验作业六
实验作业:分析Linux内核创建一个新进程的过程 20135313吴子怡.北京电子科技学院 [第一部分]阅读理解task_struct数据结构 1.进程是计算机中已运行程序的实体.在面向线程设计的系统 ...
- NPM和Yarn添加淘宝镜像
NPM设置淘宝镜像 1.查询当前配置的镜像 npm get registry > https://registry.npmjs.org/ 设置成淘宝镜像 npm config set regis ...
- ElasticSearch 2 (7) - 基本概念
ElasticSearch 2 (7) - 基本概念 摘要 ElasticSearch的一些基本核心概念,理解这些概念有助于ElasticSearch的学习 准实时NRT(Near Realtime) ...
- image 样式设置
.image-fluid:响应式大小 .image-thumbnails:照片四周会出现一个1px宽的边框 .figure:用于<figure>标签,用来标记一个图像 .figure-ca ...
- nodemoduleOfCheerio
https://www.npmjs.com/package/cheerio 这是npm的api说明 英文好的同学可以去看看. cheerioAPI 是一个用来操作jsDOM的模块: 就像jQuery一 ...
- git 客户端连接gitlab 实现简单的CI/CD
1. git 客户端的安装 下载: https://git-scm.com/download/win 截至最近:20180728最新版本 2.18的下载地址 https://github-produc ...