父子组件，以及父子组件传参

父子组件，以及父子组件传参

一、父子组件

1.建立个layout文件夹，负责写各种组件

如：在导航组件中写  子组件名字叫NavList.vue   在layout文件夹下
 <router-link to="/adduser">用户添加菜单</router-link>
 <router-link to="/userlist">用户展示菜单</router-link>

2.在父组件中导入需要的子组件

如：
//导入需要的子组件
import NavListVue from './layout/NavList.vue';
export default {
  components:{
    //组件与标签映射
    'MyNavList':NavList
  },
};

3.调用子组件

<MyNavList></MyNavList>

二、父子组件传参

​ 父组件向子组件传参

​ 第一步 父组件调用的标签中写入参数

如：
<MyNavList msg='导航菜单'></MyNavList>

第二步 子组件接受参数

export default {
    props:['msg'],  //接受父组件传过来的msg
};

第三步 子组件调用

<h1>{{msg}}</h1>   //如

三 子组件向父组件中传参

第一步 子组件定义一个方法 通过$emit传递数据

export default {
    methods:{
        send(){
            this.$emit('sendmsg','你好')
        }
    },
};

第二步 在父组件中，在调用的子组件中定义一个接受事件

如：调用的NavList子组件
<MyNavList @sendmsg='handermsg'></MyNavList>  //接受事件是sendmsg

第三部，接受子组件传来的参数用handermsg事件来监听

methods:{
    handermsg(data){
      alert(data)
    }
  }