vue 父子組件通訊

父組件:app

<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>

子組件:svg

<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>
相關文章
相關標籤/搜索