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 相关文章推荐
Javascript String.replace的妙用
Sep 08 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
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
php学习之运算符相关概念
2011/06/09 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python 实现return返回多个值
2019/11/19 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
个人找工作的自我评价
2013/10/17 职场文书
单位门卫岗位职责
2013/12/20 职场文书
生物学学生自我评价
2014/01/17 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
大学生评语大全
2014/04/18 职场文书
文秘自荐信
2014/06/28 职场文书
建筑横幅标语
2014/10/09 职场文书
五一劳动节活动总结
2015/02/09 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers