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组件之间的通信方式

最新文章

  1. 一个简单的MVC实例及故障排除
  2. 【原创】jQuery 仿百度输入标签插件
  3. Android 数据库 LiteOrm 的使用
  4. Webservice学习
  5. HDU 1828 Picture(线段树扫描线求周长)
  6. Oracle、Microsoft SQL Server、Mysql
  7. [C/C++]数据类型与变量
  8. Intellij Idea 创建Web项目入门(一)
  9. HDU 4540 威威猫系列故事——打地鼠(DP)
  10. Django教程:第一个Django应用程序(3)
  11. volatile详解
  12. Thread.sleep(0)的意义&amp; 多线程详解
  13. Hibernate注解学习1
  14. 在IE浏览器进行编辑操作再展示出现乱码问题
  15. 翻译1-在SQL Server 2016中介绍微软R服务
  16. SQL SERVER 一个SQL语句的执行顺序
  17. CSS导航条nav简单样式
  18. Java的反射机制Reflect
  19. C# Byte[] 数组操作
  20. Ubuntu下mysql的卸载重装

热门文章

  1. tomcat端口占用异常
  2. vue实现动态绑定class--多个按钮点击一个有一个
  3. python之接口自动化测试框架
  4. Oracle中的 timestamp 和 timestamp with time zone, timestamp with local time zone
  5. Python爬虫之爬取站内所有图片
  6. Java &amp;&amp; Python 算法面试常用类以及方法总结
  7. plsql登录,tables表为空解决方案
  8. android优化中国风应用、完整NBA客户端、动态积分效果、文件传输、小说阅读器等源码
  9. webservice入门程序学习中经验总结
  10. vuex分模块管理