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 相关文章推荐
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 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类中private属性继承问题分析
2012/11/01 PHP
php的一个简单加密解密代码
2014/01/14 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP微信分享开发详解
2017/01/14 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
jQuery 入门讲解1
2009/04/15 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
js中less常用的方法小结
2017/08/09 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python实现直播推流效果
2019/11/26 Python
基于python3生成标签云代码解析
2020/02/18 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
职业生涯规划怎么写
2013/12/29 职场文书
结婚保证书范文
2014/04/29 职场文书
室内设计专业自荐信
2014/05/31 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
小学家长学校培训材料
2014/08/24 职场文书
详解nginx location指令
2022/01/18 Servers
Go gorilla/sessions库安装使用
2022/08/14 Golang