vue的通讯与传递props emit (简单的弹框组件)
props父把信息传递给子组件
1父组件
<template>
<div class="hello">
<div id="app-3" v-on:click="show">
点击显示隐藏
<p v-if="seen">现在可以看到我了</p>
</div>
<div class="app-4">
<ol>
<tab v-for="item in groceryList" v-bind:todo="item">
<!--:todo-->
</tab>
</ol>
</div>
<div class="app-5">
<p>{{message}}</p>
<input v-model="message">
<button v-on:click="reverse">逆转信息</button>
</div>
</div> </template> <script>
import Tab from '@/components/tab/tab'
export default {
name: 'hello',
components:{Tab},
data () {
return {
message:'Hello Vue!',
seen:true,
todos:[
{text:'学习javascript'},
{text:'学习Vue'}
],
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其他什么人吃的东西' }
]
}
},
methods:{
show(){
this.seen=!this.seen;
},
reverse(){
this.message=this.message.split('').reverse().join('');
}
}
}
</script> <style scoped>
h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
display: inline-block;
margin: 0 10px;
} a {
color: #42b983;
}
</style>
/****
******
*******
**********
*********/
子组件
<template>
<li>{{todo.id}}{{todo.text}}</li>
</template>
<script>
export default{
props:['todo'],/*通过这个把数据传过来*/
data(){
return{ }
},
methods:{ }
}
</script>
子组件传值给父元素
只展示重要代码
子组件
this.$emit('changeLocale',locale);
父组件
<v-header @changeLocale="paLocale"></v-header>
方法
paLocale(evtValue){
//evtValue表示子组件传递过来的locale值
},
简单的 弹窗组件编写
//父组件
<template>
<div class="parent">
<button @click="showModal">按钮</button>
<child v-if="showModel" header-title="温馨提示" @close="showModel = false" @closeModel="closeModel">
<div slot="body">
<p>你是傻逼吗?</p>
<p>你是!</p>
</div>
</child>
</div>
</template>
<script>
import child from '@/components/sub/child'
export default{
components:{child},
data(){
return{
showModel:false
}
},
methods:{
showModal(){
this.showModel=true
},
closeModel(){
this.showModel=false
}
}
}
</script>
<style> </style>
//子组件
<template>
<transition name="model">
<div class="model" >
<div class="model-mask" @click="close"></div>
<div class="modal-wrapper">
<div class="modal-header">
<slot name="header">
{{headerTitle}}
</slot>
</div> <div class="modal-body">
<slot name="body">
default body
</slot>
</div> <div class="modal-footer">
<slot name="footer"> <button class="modal-default-button" @click="close">
OK
</button>
</slot>
</div>
</div>
</div>
</transition>
</template>
<script>
export default{
props:['headerTitle'],
methods:{
close(){
this.$emit('closeModel');
}
}
}
</script>
<style scoped>
.model{
position: fixed;
z-index: 96;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.model-mask{
position: fixed;
z-index: 97;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s ease;
}
.modal-wrapper{
position: relative;
width:80%;
height: auto;
margin: 0 auto;
margin-top: 100px;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
z-index:98;
}
.model-enter-active, .model-leave-active{
transition: opacity .5s;
opacity:1;
}
.model-enter, .model-leave-to {
opacity: 0
}
</style>
vue的通讯与传递props emit (简单的弹框组件)的更多相关文章
- vue移动端弹框组件,vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
- vue移动端弹框组件
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
- vue封装一个弹框组件
这是一个提示框和对话框,例: 这是一个组件 eject.vue <template> <div class='kz-cont' v-show='showstate'> &l ...
- Vue.js学习(八)—— 树形结构下拉框组件vue-treeselect
vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持. 具有嵌套选项支持的单个和多个选择 模糊匹配 异步搜索 延迟加载(仅在需要时加载深层选项的数据) 键盘支持(使用Arrow ...
- 移动端(H5)弹框组件--简单--实用--不依赖jQuery
俗话说的好,框架是服务与大家的,包含的功能比较多,代码多.在现在追求速度的年代.应该根据自己的需求去封装自己所需要的组件. 下边就给大家介绍一下自己封装的一个小弹框组件,不依赖与jQuery,代码少, ...
- vue+elementui 新增和编辑如何实现共用一个弹框
//html代码: //按钮 <el-button type="primary" size="medium" @click="addEquipm ...
- 【jQuery学习】写一个简单的弹框页面,火狐浏览器有弹框,但IE8没有弹框的原因?
我也是刚学习jQuery,就从官网上下载了jQuery的包,版本是3.2.1 代码 如下: <!DOCTYPE html> <html> <head> <me ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
随机推荐
- Linux 完整卸载oracle和grid软件
本文主要描述如何在Linux下完全卸载oracle和grid软件. 操作环境 SuSE11 oracle用户完整删除操作步骤 1.登录oracle用户,停止Oracle数据库监听和数据库实例 orac ...
- LeetCode OJ 22. Generate Parentheses
题目 Given n pairs of parentheses, write a function to generate all combinations of well-formed parent ...
- [Shell]Bash基本功能:输入输出重定向
/*----------------------------------------------------------------------------------------------- @黑 ...
- delphi 实现两个exe文件共享内存映像的代码
创建内存映像的程序 ------------------------------------------------------------------------------------------ ...
- 为了显示此页面,Firefox 必须发送将重复此前动作的数据(例如搜索或者下订单)
火狐浏览器重新加载页面出现下面提示,必须要点击“重新发送”才能完成刚才的请求: 这个是火狐的一个提示功能主要是防止同一页面的数据反复提交: 解决方法: 不要用location.reload();来刷新 ...
- 吴裕雄 python 机器学习-Logistic(1)
import numpy as np def loadDataSet(): dataMat = [] labelMat = [] fr = open('D:\\LearningResource\\ma ...
- 关于git经常忘记的:远程仓库关联。
我们有时习惯建立好工程后再传到git上,这是时候就忘记咋弄啦, 其实,只要配置远程仓库就行: git remote add +url...具体看网上哦,这里提醒下 Git clone远程分支 Git ...
- scrapy爬虫的编写步骤
scrapy的步骤: a.编写item,爬取的各个属性 b.编写spider,name 要和 scrapy crawl xxspider一致,里面编写parse的信息,就是xpath获取item的各个 ...
- cxf 例子
使用 CXF 做 webservice 简单例子 Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩展的服务,您可以将这 ...
- destoon手机端分页
$pages = ''; $pagesize = 2; $offset = ($page-1)*$pagesize; $rr = $db->get_one("SELECT COUNT( ...