Vue父子组件传值的Demo「建议收藏」

Vue父子组件传值的Demo「建议收藏」话不多说,直接上代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>Vue父子组件传值</title><scripttype="text/javascr

大家好,又见面了,我是你们的朋友全栈君。

话不多说,直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue父子组件传值</title>
    <script type="text/javascript" src="./Vue.js"></script>
</head>
<body>
    <div id="root">
        <number ref="ref1" @change="handleChange"></number>
        <number ref="ref2" @change="handleChange"></number>
        <div>{
  
  {count}}</div>
    </div>
    <script type="text/javascript"> Vue.component('number', { template: "<div @click='handleNumberClick'>{ 
    {number}}</div>", data: function() { 
     return { number: 0 } }, methods: { handleNumberClick: function() { 
     this.number ++ this.$emit('change')//向父组件发送一个消息 } } }) var vm = new Vue({ el: "#root", data: { count: 0 }, methods: { handleChange: function() { 
     this.count = this.$refs.ref1.number + this.$refs.ref2.number } } }) </script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145767.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SQL删除多表关联数据的三种方法

    SQL删除多表关联数据的三种方法1.级联删除 createtablea(id varchar(20)primarykey,passwordvarchar(20)notnull)createtableb(idintidentity(1,1) primarykey,namevarchar(50)notnull,userIdvarchar(20),fo

  • 钓鱼网站盗QQ_qq看别人的空间一定会被别人知道吗

    钓鱼网站盗QQ_qq看别人的空间一定会被别人知道吗刚刚打开手机tim看到QQ空间有留言下面一个截图的东西(别扫进去输自己的账号密码哈,看看就得了,典型的钓鱼网站)貌似在前几年就有此类网站,不过现在高级了些,下面就由图图来分析一下原理是什么鬼(毫无技术含量)大神快点绕道!!!首先看到这个图片而写是熟人给你留言的,并且还是以好友备注的名字进行留言“XXX,我们合影的照片都在这里了你太好笑了照片呆呆的,长摁识别”会有这么一句话,好奇心强的都会点进去看~【为什么要搞这种二维码呢?就是为了不让一些在线解码的网站轻易识别反而只有QQ、微信可…

  • 记一次kubernetes Evicted的处理[通俗易懂]

    记一次kubernetes Evicted的处理[通俗易懂]背景:事情这样的:kubernetes1.21.3集群。容器运行时containerd。除了K8s-node-06节点。保留这个docker节点有很多原因。比如当时没有想好用什么打包镜像。默认让jenkins打包镜像。还有就是我的gitlab10.8.7版本contarinerd运行时下无法启动。就保留了这个节点运行gitlabpod。当然了也把这个节点设置为了不可调度。不相其他应用调度到这个节点上来!最近一段时间gitlab应用频繁出现Evicted的问题:这样就陷入了一个死循环:我的k8s-

  • 谈谈API接口安全性设计思路

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:道长 www.jianshu.com/p/c6518a8f4040 接口的安全性主要围绕Token、Times…

  • 图片切割系统_图片切片工具

    图片切割系统_图片切片工具上一阵子做过一个图片切割效果,得到很多人关注。其中有很多人向我询问如何做一个真正的图片切割(裁剪),这里需要声明一下:首先js是不能操作客户端文件的(除非特殊情况),所以图片的切割必须在后台处理,对于

  • webstorm激活码最新2021【2021最新】

    (webstorm激活码最新2021)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号