vue 探讨同级组件间值的传递($on,$emit的综合运用)
2018-02-08 10:30
441 查看
想法:最近在做一个数据处理分析的系统,页面比较多,一些共用的功能也比较多,于是想起了组件化开发,想着一个组件封装好了就可以在项目的各个地方直接引入,无需再次重复编写。
举例:头部的导航栏抽出,登录模块抽出,登录按钮存放在头部导航栏里,点击按钮的时候显示/隐藏登录模块,(因登录模块在后台页面里的某个地方将再次需要,只是调起的方式不一样)。一开始登录模块默认隐藏状态,点击登录按钮时设置一个变量存放点击的状态为首次点击或再次点击,并将该状态传递给兄弟页面用于判断登录框状态的显示或隐藏。
首先官网上给出的同级组件间值的传递/获取例子是这样子的:
(监听/触发当前实例上的自定义事件。$on:监听;$emit:触发)vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"那么问题来了,用于把这两个方法牵引起来的vm代表什么呢?其实这个类似于我们的全局变量VUE。在此我们需要先创建这个全局变量,首先我们在任意文件夹下创建一个 eventConn.js,并附上创建的内容:
<!--header.vue--><template>
<div>
<div class="headerbox">
<div class="headercont">
<div class="header-logo"><strong></strong></div>
<div class="header-nav">
<Menu mode="horizontal" active-name="1">
<MenuItem name="1">
<Icon type="ios-paper"></Icon>
首页
</MenuItem>
<MenuItem name="2">
<Icon type="settings"></Icon>
我要注册
</MenuItem>
<Button type="error" class="but-login" @click="showLogin">登录</Button>
</Menu>
</div>
</div>
</div>
</div>
</template>对登录按钮的点击事件[showLogin]进行处理操作,使用$emit来监听该事件并传递一个参数,其中,参数 flag用于定义登录模块显示/隐藏的初始状态,通过点击时对值的取反操作来更换登录模块的状态(false=!false=true).
import Event from '../../assets/js/eventConn.js';
export default {
data(){
return {
isShow:'',
formInline: {
user: '',
password: '',
},
ruleInline: {
user: [
{ required: true, message: '请填写账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请填写密码', trigger: 'blur' },
{ type: 'string', min: 6, message: '密码长度不小于6位数', trigger: 'blur' }
]
}
}
},
created:function () {
let that = this;
Event.$on('LoginShow',isFlag => that.isShow = isFlag);
}
}
</script><!--home.vue-->父组件引入两个同级子组件<template>
<div>
<conn-head></conn-head>
<conn-login></conn-login>
</div>
</template>子组件模块导入
举例:头部的导航栏抽出,登录模块抽出,登录按钮存放在头部导航栏里,点击按钮的时候显示/隐藏登录模块,(因登录模块在后台页面里的某个地方将再次需要,只是调起的方式不一样)。一开始登录模块默认隐藏状态,点击登录按钮时设置一个变量存放点击的状态为首次点击或再次点击,并将该状态传递给兄弟页面用于判断登录框状态的显示或隐藏。
首先官网上给出的同级组件间值的传递/获取例子是这样子的:
(监听/触发当前实例上的自定义事件。$on:监听;$emit:触发)vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"那么问题来了,用于把这两个方法牵引起来的vm代表什么呢?其实这个类似于我们的全局变量VUE。在此我们需要先创建这个全局变量,首先我们在任意文件夹下创建一个 eventConn.js,并附上创建的内容:
import Vue from 'vue' export default new Vue;接着,我们在指定的子组件中引入并调用这个全局变量即可,引入格式如下:import Event from '../../assets/js/eventConn.js';
<!--header.vue--><template>
<div>
<div class="headerbox">
<div class="headercont">
<div class="header-logo"><strong></strong></div>
<div class="header-nav">
<Menu mode="horizontal" active-name="1">
<MenuItem name="1">
<Icon type="ios-paper"></Icon>
首页
</MenuItem>
<MenuItem name="2">
<Icon type="settings"></Icon>
我要注册
</MenuItem>
<Button type="error" class="but-login" @click="showLogin">登录</Button>
</Menu>
</div>
</div>
</div>
</div>
</template>对登录按钮的点击事件[showLogin]进行处理操作,使用$emit来监听该事件并传递一个参数,其中,参数 flag用于定义登录模块显示/隐藏的初始状态,通过点击时对值的取反操作来更换登录模块的状态(false=!false=true).
<script type="es6"> import Event from '../../assets/js/eventConn.js'; export default { name: '', data () { return { flag: false } }, methods: { showLogin(){ let that = this; that.flag = !that.flag; Event.$emit("LoginShow",that.flag) } } } </script><!--login.vue-->
<template> <div> <div class="formbox" v-show="isShow"> <h3>登录</h3> <Form ref="formInline" :model="formInline" :rules="ruleInline"> <FormItem prop="user"> <Input type="text" v-model="formInline.user" placeholder="请输入用户名"> <Icon type="ios-person-outline" slot="prepend"></Icon> </Input> </FormItem> <FormItem prop="password"> <Input type="password" v-model="formInline.password" placeholder="请输入密码"> <Icon type="ios-locked-outline" slot="prepend"></Icon> </Input> </FormItem> <FormItem> <Button type="success" long ref="loginBut" @click="handleSubmit('formInline')">登录</Button> </FormItem> </Form> </div> </di a65a v> </template>使用 v-show来控制登录模块的显示隐藏,当值为true时显示,false则隐藏。$on监听兄弟组件header里的LoginShow事件并接收其传递过来的参数flag的值,同时将改值赋给v-show定义的变量即可控制登录模块的显示/隐藏。<script type="es6">
import Event from '../../assets/js/eventConn.js';
export default {
data(){
return {
isShow:'',
formInline: {
user: '',
password: '',
},
ruleInline: {
user: [
{ required: true, message: '请填写账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请填写密码', trigger: 'blur' },
{ type: 'string', min: 6, message: '密码长度不小于6位数', trigger: 'blur' }
]
}
}
},
created:function () {
let that = this;
Event.$on('LoginShow',isFlag => that.isShow = isFlag);
}
}
</script><!--home.vue-->父组件引入两个同级子组件<template>
<div>
<conn-head></conn-head>
<conn-login></conn-login>
</div>
</template>子组件模块导入
import connHead from '../common/header'; import connLogin from '../login/login';子组件模块调用
export default { name: 'home', data () { return { } }, components:{ connHead, connLogin } }
相关文章推荐
- vue组件间通信、数据传递(父子组件,同级组件)
- vue-cli 父组件向子组件传递参数2
- Vue之父组件向子组件传递数据
- vue组件Prop传递数据的实现示例
- 纯vue以及vue+laravel父组件往子组件传递图片路径
- vue父组件与子组件间如何进行数据传递
- Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)
- vue.js $refs和$emit 父子组件交互
- vue中如何让子组件的事件传递给父组件
- vue使用$emit时,父组件无法监听到子组件的事件实例
- 父组件向子组件传递数据(vue.js)
- vue组件传递对象中实现单向绑定的方法
- 一个综合运用各种组件的tensorflow程序
- vue-cli 子组件向父组件传递参数,触发父组件方法
- vue组件中的数据传递方法
- vue 父子组件之间的数据传递
- vue组件父子间通信之综合练习(聊天室)
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- VUE .sunc (update,$emit)父子组件传递数据 手记
- vue单页面兄弟组件信息传递