在vue-cli中组件通信

cgspine 发布于2019-08-22 11:18 / 1208人阅读

摘要：一父传子组件通信拿当父组件，当子组件父组件中导入子组件子组件导出在父组件中注册子组件子组件通过来接收数据二子与父组件通信子组件主动触发方法，为向父组件传递的数据父组件监听子组件触发的事件然后调用方法二非父子组件通信把当作一个中转站组

一.父传子组件通信

拿app.vue当父组件，content.vue当子组件

1.父组件中导入子组件（子组件导出）

import contents from "./components/content";

2.在父组件中注册子组件

   data() {
        return {
                test:"0"
        };
    },
    components:{
        "v-header":headers,
        "v-content":contents
    }

3.子组件通过props来接收数据

二.子与父组件通信 子组件：



methods: {
    down() {
        this.$emit("down","null"); //主动触发down方法，"null"为向父组件传递的数据
    }
}

父组件：


     //监听子组件触发的down事件,然后调用changes方法

methods: {
    changes(msg) {
        this.test= test;
    }
}

二.非父子组件通信

//把a当作一个中转站

var a = new Vue();

组件1触发：


methods:{
   eve(){
   a.$emit("change","null")
  }
}

组件2接收：



created(){
    a.$on("change",()=>{
        this.msg = "null"
    })
}

GPU云服务器云服务器在php中使用组件在异步通信中组件和组件通信组件通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92149.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
前端开发之走进Vue.js

摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...

zxhaaa 2019-08-20 15:20 评论0 收藏0
Vue组件基础与通信

摘要：组件基础与通信一脚手架简介与安装之前安装的是模块，之后安装的是模块。如果是三级组件通信，该如何处理比如父组件与孙子组件通信。和，提供和注入实现祖先组件和后代组件之间通信。 Vue组件基础与通信一、vue cli脚手架 ① vue cli 简介与安装 vue cli 3.0之前安装的是vue-cli模块，vue cli 3.0之后安装的是@vue/cli模块。如果已经全局安装了旧版本的...

I_Am 2019-08-26 10:48 评论0 收藏0