vue组件通信之任意级组件之间的通信

原创 2018年04月15日 11:05:29

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <huahua></huahua>
    <shuangdan></shuangdan>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>


main.js:

var Event = new Vue();

Vue.component('huahua', {
    template: `
        <div>我说: <input type="text" @keyup="on_change" v-model="i_said"/></div>
    `,
    methods: {
        on_change: function(){
            Event.$emit('huahua-said-something', this.i_said);
        }
    },
    data: function(){
        return {
            i_said: ''
        }
    }
})

Vue.component('shuangdan', {
    template: '<div>花花说:{{huahua_said}}</div>',
    data: function(){
        return {
            huahua_said: ''
        }
    },
    mounted: function(){
        var me = this;
        Event.$on('huahua-said-something', function(data){
            me.huahua_said = data;
        })
    }
})

new Vue({
    el: '#app'
})


Android开发高级组件与框架——图片缓存组件

介绍图片缓存组件Universal-image-loader、Picasso、Glide、Fresco的使用与特点比较,传说中的三级缓存实现揭秘。
  • 2017年01月04日 15:43

VueJS兄弟组件通信

on和emit的事件必须是在一个公共的实例上,才能触发。 我的解决方案是: 新建bus.js import Vue from 'vue' export var bus = new ...
  • zgrkaka
  • zgrkaka
  • 2017-06-14 13:42:22
  • 1849

Vue2.0组件之间通信

Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单。笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信。 首先我...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-01 09:00:30
  • 7424

vue-cli工程下组件之间的通信

vue-cli工程下组件之间的通信
  • qq_38563845
  • qq_38563845
  • 2017-08-21 10:07:51
  • 2132

vue2.0父子组件以及非父子组件如何通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: //这里必须要用 - 代替驼峰 data(){ return { msg:...
  • mr_fzz
  • mr_fzz
  • 2017-01-20 23:46:06
  • 69181

组件与组件之间的通信以及vue2.0中的变化、示例

一、开始第一个DEMO,其中一个功能需求--组件与组件之间作用域里,但又需要传递数据。 例如:App.vue为父组件,有子组件A.vue、B.vue 1.App的数据传递给A、B 2.A、B的数据传递...
  • qq_24122593
  • qq_24122593
  • 2016-12-07 18:53:29
  • 14493

vue组件之间的多种通信方法

vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了。这里提供三种不同情况下vue组件的通信方式。http://www.jianshu.com/p/a78277b...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-07 13:42:15
  • 1015

总结vue父子组件之间的通信

一 环境搭建 步骤 1 打开git,运行npm  install --global vue-cli 这是安装vue的命令行         2 vue init webpack vue-demo ...
  • Johnny0991
  • Johnny0991
  • 2017-11-15 11:03:10
  • 3850

vue2.0中的组件通信

vue组件通讯
  • qq_36351817
  • qq_36351817
  • 2017-04-25 09:52:54
  • 329

vue.js组件与组件之间的通信

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能...
  • qq_24122593
  • qq_24122593
  • 2016-11-02 19:32:41
  • 14301
收藏助手
不良信息举报
您举报文章:vue组件通信之任意级组件之间的通信
举报原因:
原因补充:

(最多只允许输入30个字)