返回首页 | 申博娱乐APP下载

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

网站开发vue中的非父子间的通讯问题简略的实例代码

时间:2017-09-04 编辑:admin

官网上的比如好不流畅,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的比如,

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 兄弟之间的通讯问题 /title 
 script src="vue.php" /script 
 /head 
 body 
 div id="app" 
 one /one 
 two /two 
 /div 
 script 
 //创立中心事情总线。
 var bus =new Vue();
// 申博娱乐app下载组件one
 Vue.component('one',{
 template:' button v-on:click="oneFn" 点击+ /button ',
 data:function () {
 return{
 oneNum:0
// 为组件one创立挑选,用来触发事情common,此处的this指的是组件one,而在的this指的是bus。
// 组件 two
 Vue.component('two',{
 template:' p {{twoNum}} /p ',
 data:function () {
 return {
 twoNum:0
// 为组件two创立钩子,挂载$on监听事情,
 created:function () {
 var self = this;//将this赋值给self。
 bus.$on('common',function (n) {
 self.twoNum = n;//此处为self,表明是组件two的变量,若为this,则表明是bus的变量。
new Vue({
 el:'#app'
 /script 
 /body 
 /html 

我们也是新手,刚开始自学Vue,上面有不懂的童鞋请留言,一同前进!

以上所述是小编给我介绍的vue中的非父子间的通讯问题简略的实例代码,期望对我有所协助,如果我有任何疑问请给我们留言,小编会及时回复我的。在此也非常感谢我对网站的支撑!


浏览:

网站建设

流程

    网站建设流程