Vue non Sons components by value (Bus / Bus / publish subscribe model / observer mode)
Before we already know the father and son by value. Passed over the value of the parent element, by receiving subassembly props, then you can use.
I have learned the value of inter-generational transfer, layer by layer transfer are realized by props. So, how to pass values between siblings do?
By bus achieved as follows:
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> </ title>
</ head>
<body>
<div ID = "App">
<Child = Content 'the Dell'> </ Child>
<Child Content = 'Lee'> </ Child>
</ div>
<Script the src = "JS / vue.js"> </ Script>
<Script>
// for each a bus Vue binding property, in fact, he was a Vue example
Vue.prototype.bus = new new Vue ()
Vue.component ( 'Child', {
Data: function () {
return {
// to avoid directly modify the parent component pass over value, the value of the parent element to a copy of
msg: this.content
}
},
props:{
content:String
},
Template: '<div = @ the Click "the handleClick"> {{}} msg </ div>',
Methods: {
the handleClick: function () {
// subassembly change event is triggered to the parent component, while the msg pass over
this EMIT $ .Bus ( 'change', this.msg).
}
},
// this component mount when a function performed
mounted: function () {
// via bus monitor change event, the event triggered when the change time, the operation
var = this_ the this
this.bus. $ ON ( 'Change', function (Message) {
the console.log (Message)
this_.msg = Message
})
}
})
// 1. Create an instance of Vue
let vm Vue new new = ({
EL: '#app',
});
</ Script>
</ body>
</html>