父-->子（父向子传递数据通过props）

父组件代码

<template>
    <Header :url="baseUrl"></Header>
</template>
<script>
    import Header from './header';
    export default {
        name: 'index',
        components: {
           Header
        },
        data () {
            return {
                baseUrl: 'www.xhy.com'
            }
        }
    }
</script>

子组件代码

<template>
    <header>
        {{url}}
    </header>
</template>
<script>
    export default {
        name: 'header1',
        props:['url']
    }
</script>

子-->父（通过$emit）

this.$emit('自定义事件名','要传递的数据')

子组件代码

<template>
    <div>
          用户名：
          <input type="text" v-model="userName" @change="setUser">
    </div>
</template>
<script>
    export default {
        name: 'login',
        data(){
            return{
                  userName:''
            }
        },
        methods:{
               setUser (){
                  this.$emit('transferUser',this.userName);
               }
        }
    }
</script>

父组件代码

<template>
    <Login @transferUser="getUser"></Login>
</template>
<script>
    import Login from './login';
    export default {
        name: 'app',
        components: {
           Login
        },
        data () {
            return {
                user: ''
            }
        },
        methods:{
          getUser(msg){
              this.user = msg;
           }
        }
    }
</script>

作者：匆匆那年__
链接：https://www.jianshu.com/p/454a9ec78fcf
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。