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