vue 父子组件通信

父组件:

<template>
  <div id="app">
        <img width="60px" id="logo" src="./assets/LOGO.svg"/>
      <NavMain @introduce='themetext'  :index="my"></NavMain>
 
  </div>
</template>

<script>
import NavMain from './components/NavMain'
export default {
  name: 'App',
 
  components:{
      NavMain,
  },
  methods:{
      themetext (opt) {
              console.log('111')
          this.theme = opt.Text;
      
      }
  }
}
</script>

子组件:

<template>
    <div class="my_nav">
      {{index}}
      <el-menu
           :default-active="activeIndex" 
           class="el-menu-demo" 
           mode="horizontal" 
           @select="handleSelect2">
          <el-menu-item index="处理中心" >处理中心</el-menu-item>
         
        </el-menu>
        
        
       <div class="line"></div>
   </div>
</template>
<script>    
 export default {
      name:'NavMain',
      props:['index'],
      methods: {
      handleSelect2(id,index) {
          this.$emit('introduce',{
              Text:id
          })
      
      }
    }
 }
 
</script>

 

posted @ 2018-07-01 14:33  AINIJJ  阅读(143)  评论(0编辑  收藏  举报