说一说Vue(2.0)组件的通信方式
2024-10-08 21:31:52
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组件之间的通信方式
最新文章
- 一个简单的MVC实例及故障排除
- 【原创】jQuery 仿百度输入标签插件
- Android 数据库 LiteOrm 的使用
- Webservice学习
- HDU 1828 Picture(线段树扫描线求周长)
- Oracle、Microsoft SQL Server、Mysql
- [C/C++]数据类型与变量
- Intellij Idea 创建Web项目入门(一)
- HDU 4540 威威猫系列故事——打地鼠(DP)
- Django教程:第一个Django应用程序(3)
- volatile详解
- Thread.sleep(0)的意义&; 多线程详解
- Hibernate注解学习1
- 在IE浏览器进行编辑操作再展示出现乱码问题
- 翻译1-在SQL Server 2016中介绍微软R服务
- SQL SERVER 一个SQL语句的执行顺序
- CSS导航条nav简单样式
- Java的反射机制Reflect
- C# Byte[] 数组操作
- Ubuntu下mysql的卸载重装
热门文章
- tomcat端口占用异常
- vue实现动态绑定class--多个按钮点击一个有一个
- python之接口自动化测试框架
- Oracle中的 timestamp 和 timestamp with time zone, timestamp with local time zone
- Python爬虫之爬取站内所有图片
- Java &;&; Python 算法面试常用类以及方法总结
- plsql登录,tables表为空解决方案
- android优化中国风应用、完整NBA客户端、动态积分效果、文件传输、小说阅读器等源码
- webservice入门程序学习中经验总结
- vuex分模块管理