vue 父子组件之间的通信
1,父组件传递数据给子组件(子组件通过props接收数据)
父组件
<template> <div class="hello"> <div id="app"> <HeaderDiv :logo="logo" :navs="navs"></HeaderDiv> </div> </div> </template> <script> import HeaderDiv from '@/components/header-nav' export default { data(){ return { logo: 'HELLO WORLD', navs: [ {li: '主页'}, {li: '日志'}, {li: '说说'}, {li: '主页'}, {li: '相册'} ] } }, components:{ HeaderDiv } } </script> <style scoped> </style>
通过v-bind:prop 这种形式来动态传递数据,即:logo="logo",后面跟着传递的数据
子组件
<template lang="html"> <header class="header"> <div id="logo"> {{logo}} </div> <ul class="nav"> <li v-for="nav in navs">{{nav.li}}</li> </ul> </header> </template> <script> export default{ props: { navs: { type: Array, default: [] }, logo: { type: String, default: '' } } } </script> <style> </style>
子组件通过props方法,接收验证数据,如果navs传递过来,就展示接收到的数据,否则显示默认值[]。同理,logo也是一样
2,子组件传递数据给父组件(通过自定义事件)
子组件
<template lang="html"> <section> <div class="login"> <label> <span>用户名: </span> <input v-model="username" @change="setUser"> </label> </div> </section> </template> <script> export default{ data(){ return { username: '' } }, methods: { setUser: function(){ this.$emit('transferUser',this.username) } } } </script> <style> </style>
父组件通过监听自定义事件,当子组件里的$emit(eventName)触发自定义事件的时候,父组件执行相应的操作
子级$emit 后会触发自己身上的某一个自定的方法,这个方法对应函数在父级的身上
<template> <div id="app"> <HeaderDiv @transferUser="getUser"></HeaderDiv> <p>用户名: {{user}}</p> </div> </template> <script> import HeaderDiv from '@/components/header-nav' export default { data(){ return { user: '' } }, methods: { getUser(msg){ this.user = msg } }, components:{ HeaderDiv } } </script> <style scoped> </style>