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>