vue2[初级]消息订阅与发布组件

本节内容

vue中的消息订阅与发布组件 pubsub

– 回顾下父子两个组件之间的交互方式

• 方式1 数据直接传递
  – 父组件定义data方法中定义数据 将数据名称绑定到标签中
  – 子组件通过props接收 然后通过for循环遍历数据或直接取值操作

方式1 代码思路

父组件
// 标签中绑定属性
<Menu222 :menus="menus" :webSide="webSide" />
// 定义数据
data(){
   return {
     webSide:{// logo图片连接
       url:'http://www/sun.com/',
       title:'Java官方网站'
     },
     menus:[
       {id:1,name:'科技2'},
       {id:2,name:'体育2'},
       {id:3,name:'财经2'},
       {id:4,name:'医疗2'},
       {id:5,name:'政治2'},
       {id:6,name:'教育2'}
     ]
   }
 }

子组件
// 直接取值或通过遍历取值
<a :href="webSide.url" :title="webSide.title" target="_blank">
 <img src="../assets/logo.jpg" alt="SUN JAVA" >
 </a>
 <ul>
   <!-- 这里必须要加上key 以免后期出现数据混乱 -->
   <li v-for="(menu,index) in menus" :key="menu.id">
     <a :href="'http://localhost/ment/'+menu.id">{
  {menu.name}}</a>
   </li>
 </ul>

// 接收父组件的属性
props:['menus','webSide']

• 方式2 调用父组件中的方法
  – 首先父组件中定义方法并绑定到标签中
  – 然后子组件通过props接收
  – 子组件接收到父组件的方法后 在methods中通过this.父组件中的方法名来调用父组件中的方法

方式2 代码思路

// 父组件
// 绑定方法到标签中 addMenus
<Menu222 :menus="menus" :webSide="webSide" :addMenus="addMenus"/>

// 定义方法
 methods:{
    addMenus(menu){// 接收子组件调用时传递过来的值
      this.menus.push(menu);// 在menus数组的最后位置添加元素
    }
  }
  
// 子组件
// 页面传值操作
// input中双向绑定数据content
<input type="text" v-model="content" key="Math.random()"><br>
<button @click="add">添加</button>
// 接收父组件传递的属性
props:['menus','webSide','addMenus'],
  data(){ // 接收当前页面输入的值
    return {
      co