Vue组件之间传值

1,115 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

吃饱饭才有力气写代码~

今天再来理一理Vue组件中父子组件之间相互传值的逻辑,理解上其实很简单,但是像我们这样的初学者实际使用时可能还会有困惑或者不熟练的地方,参考了网上的代码把这个记录一下,方便用到的时候参考!

父组件向子组件传递数据

子组件中用 props:[参数名] 从父组件取值,在需要的位置使用;

父组件中调用子组件,用v-bind绑定传给子组件的参数需要的值;

//子组件:
<template>
    <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{
        name: 'headerDiv',
        data(){
            return{
                navs:[
                    {li:'主页'},
                    {li:'日志'},
                    {li:'说说'},
                    {li:'相册'},
                ]
            }
        },
        props:['logo']
        //props:{
        //    logo: String,
        //    required: true
        //}
    }
</script>
//父组件
<template>
    <div id = "app">
        <HeaderDiv :logo="logoMsg"></HeaderDiv>
    </div>
</template>
<script>
    import HeaderDiv from './components/header'
    export default{
        name: 'app',
        data(){
            return{
                logoMsg: 'Hello World'
            }
        },
        components:{
            HeaderDiv
        }
    }
</script>

子组件向父组件传递数据(发布订阅模式)

子组件中使用 $emit 自定义事件 把值传给父组件

父组件中用该事件 调用方法 获取子组件传来的参数值

<template>
    <section>
        <div class="login">
            <label>
                <span>用户名:</span>
                <input v-model="name" @change="setName"/>
            </label>
        </div>
    </section>
</template>
<script>
    export default{
        name: 'login',
        data(){
            return{
               name: ''
            }
        },
       methods:{
           setName: function(){
               this.$emit('transferName',this.name)
           }
       }
    }
</script>
//父组件
<template>
    <div id="app">
        <LoginDiv @transferName="getName"></loginDiv>
        <p>用户名为:{{name}}</p>
    </div>
</template>
<script>
    import LoginDiv from './components/login'
    export default{
        name: 'app',
        data(){
            return{
                name: ''
            }
        },
        components:{
            LoginDiv
        },
        methods:{
           getName(msg){
               this.name = msg
           }
       }
    }
</script>