vue --- 获取子组件数据的一个应急方案$refs

使用$refs需要注意以下2点:
1.html方法使用子组件时,需使用ref = “xxx” 声明.
2.在父组件中使用,this.refs.xxx.msg 获取数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body><div id="app"><p>{{ message }}</p><my-component ref="comA"></my-component><button @click="handleRef">ref获取子组件数据</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>Vue.component('my-component',{template:'<button @click="sendMessage">派发事件</button>',data:function(){return {msg:'来自子组件'}}})const app = new Vue({el:'#app',data:{message: ''},methods:{handleRef:function(){this.message = this.$refs.comA.msg}}})
</script>
</body>
</html>

在这里插入图片描述
参考《Vue.js实战》P82

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251035.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES6-4/5 解构赋值、函数默认值、数组解构、对象解构

ES-4 解构赋值、函数默认值、数组解构、对象解构 ES-5 隐式转换、函数参数解构、解构本质、()用法 一 解构赋值 1 虚值 含义&#xff1a;在Boolean转换结果为假的值falsy 2 函数默认值 ES6 内部使用严格相等运算符&#xff08;&#xff09;&#xff0c;判断一个位置是否有值…

echarts --- 多折线图按段显示颜色规则订制

描述: 图中有4个序列,序列1和序列2在同一个x轴下,显示不同的颜色.(如,在-40到-30,序列一是红色,而序列2是黑色) 关键: VisualMap中的seriesIndex属性(根据不同的系列,制定不同的颜色规则). 下面是代码,可以直接复制到 echart实例 中进行调试 var symbolSize 20; var data [[…

ES6-6 - this指向、箭头函数基本形式、rest运算符

一 chrome断点调试 观察函数调用栈 // 25min var x 1; function foo(x, y function () { x 2; console.log(2) }) {var x 3;y();console.log(x) } foo() console.log(x) // 2 3 1var x 1; function foo(x, y function () { x 2; console.log(x) }) {x 3;y();console.…

ES6-7 - 箭头函数的实质、箭头函数的使用场景

箭头函数返回对象 // 这种情况要要用(),否则会将对象的{}解释为块 const fn (a, b) > ({a:1, b:2})箭头函数的特点 this指向由外层函数的作用域来决定&#xff0c;它本身没有this&#xff0c;不能通过call、apply、bind改变不能作为构造函数使用不可以使用arguments对象&…

javasript --- 一个日期规范(x秒前,x分前...)

Time函数(通俗易懂,自己根据实际需求修改吧- -) // time.js var Time {// 获取当前时间戳getUnix: function () {var date new Date();return date.getTime();},// 获取今天0点0分0秒的时间戳getTodayUnix: function () {var date new Date();date.setHours(0);date.setMin…

ES6-8 - 函数名/对象拓展、描述符、getter/setter

函数名 有两种特殊情况&#xff1a;bind方法创造的函数&#xff0c;name属性返回bound加上原函数的名字&#xff1b;Function构造函数创造的函数&#xff0c;name属性返回anonymous。 bind函数名 // 以bound开头 function foo() { } const fnName foo.bind().name console.lo…

javascript --- 再识闭包

看下面一个例子: function zipCode(code, location) {let _code code;let _location location || ;return {code: function () {return _code;},location: function() {return _location;}} }再上述封闭的函数中,code的匿名函数根据作用域链可以访问到外面的_code变量. con…

ES6-9 对象密封4种方式、assign、取值函数的拷贝

一 对象密封 1 Object.preventExtensions 禁止对象拓展&#xff0c;仍可删除 严格模式下报错 const origin {a: 1 } const fixed Object.preventExtensions(origin) console.log(origin fixed) // true console.log(Object.isExtensible(origin)) // false 不可拓展 orig…

javascript --- 使用ajax与服务器进行通信

Ajax: (Asynchronous JavaScript and XML,异步JavaScript与XML技术)是一种有效利用JavaScript和DOM的操作. 与传统HTTP请求的区别: Ajax允许只更新页面的一部分,因此减少了响应中传输的数据量 Ajax的API: Ajax与服务器进行通信,可以使用JavaScript中原生的XMLHttpRequest对象…

ES6-10 super、4种遍历方式、原型、symbol遍历

由于现代 JavaScript 引擎优化属性访问所带来的特性的关系&#xff0c;更改对象的 [[Prototype]]即__proto__在各个浏览器和 JavaScript 引擎上都是一个很慢的操作。 一 Object原型方法 1 Object.setPrototypeOf(obj, proto) 用该方法而不是直接修改__proto__返回值是设置好原…

IntelliJ IDEA使用

1&#xff1a;下载 ideaIU-2017.2.exe&#xff0c;JetbrainsCrack-2.6.2.jar(补丁) 2&#xff1a;安装ideaIU-2017.2.exe&#xff0c;将补丁放在D:\java\intellij\IntelliJ IDEA 2017.2\bin 目录下 3&#xff1a;在安装的idea下面的bin目录下面有2个文件 &#xff1a; 一个是id…

js中如何删除json对象的某一个选项

我有一个这样一个对象&#xff0c;getData, 但是我不想要每一项的id&#xff0c;那怎么去删除呢(使用delete)? getData.map((item) >{delete item["id"];});console.log(getData);转载于:https://www.cnblogs.com/mmykdbc/p/8386407.html

ES6-11 Symbol、iterator、forOf、typeArray

…剩余运算符 const obj1 {a: 1,b: 2 } const obj2 {a: 100,b: 2,c: 300 } const obj {...obj1,...obj2 } console.log(obj) // 和Object.assign(obj, obj1, obj2)结果相同[Symbol.hasInstance] Symbol构造函数上的属性&#xff0c;默认调用了方法 iterator迭代器 对数…

node --- 游走在客户端和服务器间的http

本篇文章,讲述了一个很简单的上传图片(/start)到本地服务器,然后路由跳转到/upload. 写这个程序的目的是为了帮助理解HTTP的一些基本概念及node对于http api的实现以及程序的设计模式. IP: 计算机之间的通信 TCP: 应用程序之间的通信 HTTP: 基于TCP实现的应用层协议,设计之初是…

redis配置环境变量

直接上图不解释 redis安装路径&#xff0c;我的电脑右击属性 窗口R键&#xff0c;输入cmd回车&#xff0c;输入redis-server.exe 回车 再开一个命令窗口&#xff0c;窗口R键&#xff0c;输入cmd回车&#xff0c;输入 redis-cli.exe -h 127.0.0.1 -p 6379 回车 转载于:https:/…

对转义字符的思考

ASCII码 计算机存储文字时用的是二进制&#xff0c;ASCII码就是一张对照表&#xff0c;什么字符对应什么码&#xff0c;将二进制码存储下来0-127位表示基础的ASCII码0-31&#xff0c;和127表示非打印控制字符&#xff08;如换行、回车、响铃、文头、文尾&#xff09;32-126表示…

ES6-12 array/数值拓展、ArrayOf、ArrayFrom

要使用…须有迭代器接口 数组方法 构造器上的方法 Array.of()声明数组 替代new Array()的方式声明数组new Array()不传参数返回空数组&#xff0c;只传1个参数时&#xff0c;代表数组长度&#xff0c;内容用empty填充&#xff0c;传多个参数&#xff0c;则代表数组内容&…

React01

目录 React-day01 入门知识React介绍官网React开发环境初始化 SPA脚手架初始化项目&#xff08;方便&#xff0c;稳定&#xff09;*通过webpack进行初始化配置镜像地址开发工具配置元素渲染组件及组件状态函数定义组件(无状态)类定义组件(有状态)*组合组件Props属性*State状态*…

算法 --- 反转数组

几个注意点: 1.输出的时候,也要做数字超出处理 2.js中可以使用 str -0 将字符串类型转换成数字类型 ( 注意不是 0) 3.可以使用 num ‘’ 将数字类型转换成字符串类型 4.使用str.split(’’) 可以将字符串转换成数组 5.使用arr.join(’’) 可以将数组转换成字符串 6.JS中2的31次…

ES6-13 正则方法、修饰符yus、UTF_16编码方式

修饰符 m multiLine 对于str中含\n的情况g globali ignoreCase 元字符 反斜杠加转义 元字符含义简写\w匹配字母、数字、下划线。等价于’[A-Za-z0-9_]’。word\W匹配非字母、数字、下划线。等价于 ‘[^A-Za-z0-9_]’。\s匹配任何空白字符&#xff0c;包括空格、制表符、换页…