Vue(2.0)是组件化的开发模式,在不借助vuex框架的前提下,组件之间如何通信呢?接下来我在开发中总结了几种情况。
1.父组件给子组件传值(props):

父组件给子组件传值的方式主要是用函数props,具体操作如下

子组件部分

  <template>

       <div>{{ message }}<div/> 

 </template> 

 <script>
export default {
name="child",
props:['message'], //利用props函数,定义一个“message”变量
data(){ }
}
<script/>

父组件部分:

<template>
<v-child message="msg"><v-child/> <!--在这里传值-->
</template>
<script>
import Child form './child.vue'
export default {
name="parent",
components:{
'v-child':Child
}
data(){
return{
msg:'hello world'
}
}
}
<script/>

2.子组件给父组件传值($emit) 子组件给父组件传值的中心思想是;通过方法传参,具体用法如下:

子组件部分

   <script>
data(){
return{
msg:'123'
}
},
methods:{
funcName:function(){
this.$emit("tanslate",this.msg) /*自定一个事件名tanslate和一个参数this.msg */
}
}
<script/>

父页面HTML部分:通过子页面定义的tanslate事件调用自定的tanslateText方法

<v-child v-on:tanslate="tanslateText"></v-child>

父页面js部分:

  methods:{
tanslateText:function(item){ //参数text是子页面传过来的参数
console.log(item) //打印出子页面传过来的参数
}
}

3.兄弟组件之间传值

不借助vuex的话,兄弟组件之间通信时没什么办法的,但是我们可以利用现有的知识来实现兄弟组件通信,中心思想是“先子传父,在父传子”,具体代码与上面的方法相同,好了!以上就是不借助vuex组件之间的通信方式

说一说Vue(2.0)组件的通信方式的更多相关文章

  1. Vue 2.0 组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  2. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  3. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  4. Vue 2.0 右键菜单组件 Vue Context Menu

    Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c

  5. WijmoJS V2019.0 Update2发布:再度增强 React 和 Vue 框架的组件功能

    前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...

  6. 使用TypeScript给Vue 3.0写一个指令实现组件拖拽

    最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考 ...

  7. Vue.2.0.5-单文件组件

    介绍 在很多Vue项目中,我们使用 Vue.component 来定义全局组件,紧接着用new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方案在只是使用 ...

  8. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  9. 使用 Vue 2.0 实现服务端渲染的 HackerNews

    Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...

随机推荐

  1. 在windows系统下安装使用msf

    前沿 msf基本是我在kali里最经使用的工具了 因为今天碰到一些关于VmWare的事情没有解决 windows在前一段时间更新,要求我卸载vmware虚拟机,否则就无法更新. 卸载之后再装回来就无法 ...

  2. crm项目-业务实现

    ###############  crm业务    ############### """ 校区管理,部门管理,课程管理, 这三个都比较简单 1,只需要展示校区名称,这是 ...

  3. cannot be found on object of type xx.CacheExpressionRootObject

    0 环境 系统环境:win10 编辑器:IDEA 1 前言->环境搭建 1-1 pom依赖 <?xml version="1.0" encoding="UTF ...

  4. 93)PHP,session代码练习

    (1)开启session Session_start(): (2)session值的设定: <?php session_start(); $_SESSION['name']='xiaohua'; ...

  5. 92)PHP,cookie代码补充

    (1)Cookie值,仅仅支持字符串类型. (2)Cookie键,可以写成下标数组形式. beifen.php <?php /** * @第一个值是name * @第二个值是value * na ...

  6. 数据库连接中断-spring-springBoot

    问题:据库和应用在同一台机,数据库用mysql5.6.20,已经升级druid到最新的1.0.7版本,访问的是localhost的mysql,放一个晚上不访问,第二天访问就报错了,重启服务正常,错误提 ...

  7. 吴裕雄--天生自然python学习笔记:Python3 函数

    函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以自己创建函数,这 ...

  8. Typescript - 类型断言

    原文:TypeScript基本知识点整理 零.序言 类型断言,可以用来手动指定一个值的类型. 给我的感觉,和 java 中的强制类型转换很像. 常常和联合类型配合使用,如: // 错误示例 funct ...

  9. Widgets学习

    ListView ListView RecyclerView RecyclerView ExpandableListView 关闭箭头 elvMsg.setGroupIndicator(null); ...

  10. Mac下如何使用homebrew

    Homebrew简称brew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件. 常用的命令: 搜索软件:brew search 软件名,如brew search wget ...