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

本文实例讲述了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>www.jb51.net 小练习</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.jb51.net/code/HtmlJsRun测试，可得到如下运行效果：

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

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

赞 (0)

相关推荐

  • 详解vue跨组件通信的几种方法

    在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了问题. props双向绑定 通过 sync 双向绑定,属性变化会同步到所有组件,这也是最简单的实现方式,缺点是属性会比较多.实现方式如下 App.vue 文件 <template> <div id="app"> <mask :hide-mask.sync="hideMask"></mask> <

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

  • 详解Vue组件之间的数据通信实例

    详解Vue组件之间的数据通信实例

    最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~ 关于父子组件以及非父子组件之间的数据通信 1 父子组件之间数据通信 一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改.而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递.(是不是有点懵逼了,看个例子吧 ) (这里我就直接

  • Vue组件通信的四种方式汇总

    前言 众所周知vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了.本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信方式:父子组件通信 父组件向子组件传递数据 父组件一共需要做4件事 1.import son from './son.js' 引入子组件 son 2.在componen

  • 详解vue组件通信的三种方式

    1. 第一种方式就是官方推荐的 官方推荐方式 有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu

  • Vue.js每天必学之组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

  • Vue.js组件间通信方式总结【推荐】

    平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子组件通过props通信 在组件中,使用选项props来声明需要从父级组件接受的数据,props的值可以是两种:一种是字符串数组,一种是对象.props中声明的数据与组件data函数return的主要区别在于props来自父级,而data中的组件是自己的数据,作用域是组件本身,这两种数据都可以在模板t

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

  • vue实现的组件兄弟间通信功能示例

    vue实现的组件兄弟间通信功能示例

    本文实例讲述了vue实现的组件兄弟间通信功能.分享给大家供大家参考,具体如下: 兄弟组件间通信(event) 借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发 var bus = new Vue(); bus.$emit() bus.$on() 熊大想要发消息给熊二, 接收方(熊二):事件绑定 bus.$on('customEvent',function(msg){ //msg就是通过事件 传递来的数据 }) 发送方(熊大):触发事件 bus.$emit('cust

  • Vue 兄弟组件通信的方法（不使用Vuex）

    Vue 兄弟组件通信的方法（不使用Vuex）

    项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下面简单介绍一下使用传统方法,实现父子组件通信的方法. 简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出. 主要的思路就是:先子传父,在父传子 首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数. 示

随机推荐