弹窗组件：
<template>
<div class="modal-mask">
<div class="modal-confirm">
<h4 class="confirm-header">操作提示</h4>
<div class="confirm-content">
{{ content }}
</div>
<div class="confirm-btns">
<button class="btn" v-on:click="op('cancel')">取 消</button>
<button class="btn btn-primary" v-on:click="op('ok')">确 定</button>
</div>
</div>
</div>
</template>
调用组件的页面：
<template>
<div>
<h1>Alert</h1>
<button class="btn btn-primary" v-on:click="alert">alert</button>
<confirm :parent-msg="parentMsg" v-show="confirmshow"></confirm>
</div>
</template>
这个是父组件
<template>
<div id="app">
<confirm :m="msg"></confirm>
</div>
</template>
<script>
import confirm from "./components/confirm";
export default {
name: 'app',
data(){
return {
msg:"父组件的message"
}
},
components:{
confirm
}
}
</script>
子组件
<template>
<p>{{m}}</p>
</template>
<script>
export default {
props:["m"]
}
</script>
就这么点事，如果需要双向绑定还得改
发提问之前可以预览看下先。。这些的是个啥..
写麻烦了，非父子关系的这么搞，也能用，非要props传递的话我再去搞
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组建通信</title>
</head>
<style>
.chlid{width: 400px;border:1px solid red;margin:0 auto;text-align: center;}
</style>
<body>
<div id="box">
<parent></parent>
</div>
<template id="chlid">
<div class="chlid">
<span>弹框</span>
<p>{{a}}</p>
<button @click="en">enter</button>
<button @click="ca">cancle</button>
</div>
</template>
<template id="parent">
<div>
<p>父组件</p>
<p>{{a}}</p>
<button @click="toggle">呼叫弹窗</button>
<chlid v-show="key"></chlid>
</div>
</template>
<script src="vue.js"></script>
<script>
window.onload=function(){
var Event=new Vue();
Vue.component('parent', {
template: '#parent',
data:function(){
return {
a:'父组件的msg',
key:false
}
},
methods:{
toggle:function(){
this.key=!this.key;
Event.$emit('parentMsg',this.a);
}
},
mounted(){
Event.$on("chlidMsg",function(a){
this.key=a;
}.bind(this));
}
});
Vue.component("chlid",{
template:"#chlid",
data:function(){
return {
a:"子组件数据"
}
},
methods:{
en:function(){
alert("enter to do");
Event.$emit("chlidMsg",false);
},
ca:function(){
alert("cancle to do");
Event.$emit("chlidMsg",false);
}
},
mounted(){
Event.$on('parentMsg',function(a){
this.a=a;
}.bind(this));
}
})
new Vue({
el:'#box'
});
};
</script>
</body>
</html>