without using the .vue single file,
I want to click the button in the profile component to make the modal box component display, mainly to modify the showmode value of the root instance.
started to want to use prop, and found that I didn"t find a suitable column in this situation.
use the event emitter. I don"t know how to use it.
the main structure of html is as follows
<div id="app">
...
<router-view></router-view>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" @close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>
<script type="text/x-template" id="profile">
<button @click="togleModal"></button>
</script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-footer">
<button class="modal-default-button" @click="$emit("close")">
OK
</button>
</div>
</div>
</div>
</div>
</transition>
</script>js is as follows, streamlined
var bus = new Vue();
// register modal component
Vue.component("modal", {
template: "-sharpmodal-template"
});
var profile = {
template: "-sharpprofile",
data: function(){
return {
};
},
created: function () {
bus.$on("show-modal", function(flag){ //
//todo something
console.log(flag);
});
},
methods: {
}
};
var routes = [
{path: "/"},
{path: "/profile", component: profile}
];
var ROUTER = new VueRouter({
routes: routes
});
var App = new Vue({
el: "-sharpapp",
data: {
showModal: false,
uinfo: {}
},
created: function () {
bus.$emit("show-modal", this.showModal);
},
methods: {
goProfile: function(){
this.$router.history.push("/profile");
}
},
watch: {
"$route": function(to, from) {
console.log(this.$route.path);
}
},
router: ROUTER,
});