vue中通信方式

  • vuex中共享state
  • 父子组件emit/on
  • 跨组件event bus

跨组件eventbus通信

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
        <style>

        </style>
    </head>
    <body>
        <div id="todo-app">
            <h1>todo app</h1>
            <new-todo></new-todo>
            <todo-list></todo-list>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
    var eventHub = new Vue({
        data() {
            return{
                todos:[‘A‘,‘B‘,‘C‘]
            }
        },
        created:function () {
            this.$on(‘add‘, this.addTodo)
            this.$on(‘delete‘, this.deleteTodo)
        },
        beforeDestroy:function () {
            this.$off(‘add‘, this.addTodo)
            this.$off(‘delete‘, this.deleteTodo)
        },
        methods: {
            addTodo: function (newTodo) {
                this.todos.push(newTodo)
            },
            deleteTodo: function (i) {this.todos.splice(i,1)
            }
        }
    })
    var newTodo={
        template: ‘<div><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></div>‘,
        data() {
            return {
                newtodo: ‘‘
            }
        },
        methods: {
            add: function(){
                eventHub.$emit(‘add‘,this.newtodo);
                this.newtodo=‘‘;
            }
        }

    }
    var todoList = {
        template:`<ul><li v-for="(index,item) in items">{{index}}           <button @click="rm(item)">X</button></li>           </ul>`,
        data(){
          return{
             items:eventHub.todos
          }
        },
        methods:{
          rm:function(i){
              eventHub.$emit(‘delete‘,i)
          }
        }
    }
    var app= new Vue({
        el:‘#todo-app‘,
        components:{
            newTodo:newTodo,
            todoList:todoList
        }
    })

    </script>
</html>
时间: 2024-11-09 00:45:47

vue中通信方式的相关文章

vue中8种组件通信方式

一.props / $emit 下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:['红楼梦', '西游记','三国演义'] // section父组件 <template> <div class="section"> <com-article :articles="articleList"></com-article> <

理解Vue中的Render渲染函数

VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现如下html: <div id="container"> <h1> <a href="#"> Hello world! </a> </h1> </div> 我们会如下使用: <!DOCTYPE html> <html

vue中自定义指令

在vue中自定义标签,首先要调用vue中一个directive的方法,具体方法:Vue.direction('指令名称',function(){ }); 例如我们要写一个关于颜色的指令,叫v-colorred: 1 Vue.directive('colorred',function(){ 2 3 this.el.style.color='red'; 4 }); 在html中,我直接用v-colorred指令就可以了,例如: 1 <p v-colorred>1234567890</p>

vue中的vue-cli

在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org 这个命令行,安装,安装之后检查cnpm的版本 cnpm -v 之后创建项目文件进入项目文件中,在comd中下载vue-cli cnpm install vue-cli -g --s

如何在Vue中建立全局引用或者全局命令

1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到到相同模块.我们不想每个文件都import 一次模块. 如果是vue编写的插件我们可以用 Vue.use(...) 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办? 第一步:最好建立一个全局的命令文件例如:directive/directive.js 第二步:利用Vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus 让表单自动聚焦 第三部步:在main.js(入口

better-scroll在vue中的应用

在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 -> 钱包->滴滴出行"体验效果. 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在 这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. 不少同学可能用过 better-scroll,我收到反馈最多

Vue中如何使用axios发送jsonp跨域验证

https://cnodejs.org/topic/5930430f03dba3510d8a62c6 在使用axios发送请求时,服务器端设置 res.header("Access-Control-Allow-Origin", "*");可以正确得到结果 当服务器端不设置允许跨域时,使用jsonp方式发送就不行了,提示错误如下 XMLHttpRequest cannot load http://localhost:3000/axios?cb=cb. No 'Acce

Js跑马灯效果 &amp;&amp; 在Vue中使用

DEMO: <!DOCTYPE html><html> <head> <title>滚动播报</title> <meta charset="UTF-8"> <style> .content { height: 60px; background-color: #2c2c34; overflow: hidden; } .content ul { white-space: nowrap; } .content

vue中简单的小插曲

我们现在来学习一下vue中一些简单的小东西: 首先我们必须要引入vue.js文件哦! 1.有关文本框里的checkbox js代码: new Vue({ el:"#app", data:{ mag:" " } }) html代码: <div id="app"> <input type="checkbox" v-model="mag"> <h1>{{mag}}</h1