vue组件之间通信实例总结(点赞功能)


Posted in Javascript onDecember 05, 2018

本文实例讲述了vue组件之间通信。分享给大家供大家参考,具体如下:

总结:

父组件--》子组件

①通过属性

步骤1:

<son myName="michael" myPhone='123'></son>
<son :myName="userList[0]"></son>

步骤2:

Vue.component('son',{
props:['myName','myPhone']
})

②通过$parent

直接在子组件中通过this.$parent得到调用子组件的父组件

子组件--》父组件

①events up

步骤1:在父组件中 调用子组件的时候 绑定一个自定义事件 和 对应的处理函数

methods:{
recvMsg:function(msg){

//msg就是传递来的数据

}
},
template:'
<son @customEvent="recvMsg"></son>
'

步骤2:在子组件中 把要发送的数据通过触发自定义事件传递给父组件

this.$emit('customEvent',123)

②$refs

reference 引用

步骤1:在调用子组件的时候 可以指定ref属性

<son ref='zhangsan'></son>

步骤2:通过$refs得到指定引用名称对应的组件实例

this.$refs.zhangsan

兄弟组件通信

步骤1:创建一个Vue的实例 作为事件绑定触发的公共的对象

var bus = new Vue();

步骤2:在接收方的组件 绑定 自定义的事件

bus.$on('customEvent',function(msg){
//msg是通过事件传递来的数据 (传递来的123)
});

步骤3:在发送方的组件 触发 自定义的事件

bus.$emit('customEvent',123);

每日一练:

创建2个组件,main-component,son-component

视图:

main-component 显示一个按钮
son-component 显示一个p标签

功能:

main-component 定义一个变量count,初始化为0,将count传递给son-component,son-component接收到数据显示在p标签中

main-component 在点击按钮时,实现对count的自增操作,要求son-component能够实时显示count对应的数据

son-component在接收到count之后,在count大于10的时候,将main-component的按钮禁用掉
(参考:<button v-bind:disabled="!isValid">clickMe</button>)

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>3water.com 小练习</title>
  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <main-component></main-component>
  </div>
  <script>
  /*
    每日一练:
创建2个组件,main-component,son-component
视图:
 main-component 显示一个按钮
 son-component 显示一个p标签
功能:
  main-component 定义一个变量count,初始化为0,将count传递给son-component,son-component接收到数据显示在p标签中
  main-component 在点击按钮时,实现对count的自增操作,要求son-component能够实时显示count对应的数据
  son-component在接收到count之后,在count大于10的时候,将main-component的按钮禁用掉
  (参考:<button v-bind:disabled="!isValid">clickMe</button>)
  */
//创建父组件
    Vue.component("main-component",{
      data:function(){
        return {
          count:0,
          isDisabled:true
        }
      },
      methods:{
        //点击按钮对count进行自增
        //并通过$emit触发countAdd,并把count的值传递给子组件
        //判断count==10的时候让按钮禁用
        countAdd:function(){
          this.count++;
          console.log("对数据进行自增:"+this.count);
          this.$emit("countAdd",this.count);
        }
      },
      template:`
        <div>
          <button @click="countAdd" v-bind:disabled="!isDisabled">点我</button>
          <son-component v-bind:myCount="count"></son-component>
        </div>
      `
    })
//创建子组件
    Vue.component("son-component",{
      //通过props接收父组件传递过来的值
      props:["myCount"],
      template:`
        <div>
          <p>{{myCount}}</p>
        </div>
      `,
      //数据更新完成后判断从父组件拿到的值
      updated:function(){
        if(this.myCount>10){
          //子组件通过$parent直接获取父组件的数据
            this.$parent.isDisabled = false;
          }
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可得到如下运行效果:

vue组件之间通信实例总结(点赞功能)

感兴趣的朋友还可以使用上述在线工具测试一下代码的运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 #Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 #Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 #Javascript
vue-cli3搭建项目的详细步骤
Dec 05 #Javascript
详解vue中async-await的使用误区
Dec 05 #Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 #Javascript
使用FormData实现上传多个文件
Dec 04 #Javascript
You might like
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
python设置检查点简单实现代码
2014/07/01 Python
python使用cPickle模块序列化实例
2014/09/25 Python
python实现发送邮件及附件功能
2021/03/02 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
消防器材管理制度
2014/01/28 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
以权谋私检举信范文
2015/03/02 职场文书
车间质检员岗位职责
2015/04/08 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年检验科工作总结
2015/04/27 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
Java死锁的排查
2022/05/11 Java/Android