Vue中元件之間互相傳值(父元件傳給子元件，子元件傳給父元件)

在Vue項目中，經常會出現，父元件傳值給子元件，同時，有時候也希望子元件的值傳遞給父元件。

場景：比如，你封裝了一個input元件，你需要在父元件引用的時候，設定placeholder，這就需要把它傳給子元件，同時，你input元件中輸入了什麼内容,需要給父元件，并在父元件中做邏輯操作。

• 父元件傳值給子元件，這個在傳遞的過程中依賴于props屬性，把要給子元件傳遞的參數名，配置在props中。

注意點：

1.props是一個數組，也可以是一個{}

//形式一
props:['obj1','obj2','obj3','obj4']
//形式二 支援的類型有 String, Number, Boolean, Function, Object, Array, 
props:{
'obj1':String,
'obj2',[String,Number],
'obj3':{
type:String,
required:true
},
'obj4':{
type:Number,
default:100
}

}
           

2.變量要用引号包含

• 使用方法 

在Vue項目中，建立兩個模闆一個是SuperTemp.vue，另外一個是ChildTemplate.vue，

• SuperTemp.vue

<template>
    <div class="superTemplate" >
        <p>{{childMsg}}</p>
        <ChildTemplate superMsg='我是父元件内容' v-on:ToSuper='passParam'></ChildTemplate>
    </div>
</template>

<style scoped>
p{
    color:brown;
    font-size: 30px;
}
</style>

<script>
import ChildTemplate from './ChildTemplate';

export default {
    name:'superTemplate',
    components:{
        ChildTemplate:ChildTemplate
    },
    data:function(){
        return {
            childMsg:''
        }
    },
    methods:{
        passParam:function(obj){
            this.childMsg = obj;
        }
    }
}
</script>
           

• ChildTemplate.vue

<template>
    <div class="childTemplate">
        <p>{{superMsg}}</p>
        <p>{{childMsg}}</p>
        <button @click="passObj">點選切換</button>
    </div>
</template>

<style scoped>
p{
    color: blue;
    font-size: 40px;
}
button{
    width: 200px;
    height: 50px;
    background: green;
}
</style>

<script>
export default {
    name:'childTemplate',
    props:['superMsg'],
    data:function(){
        return {
            childMsg:'子元件資訊'
        }
    },
    methods:{
        passObj:function(){
            this.$emit('ToSuper',this.childMsg);
        }
    }
    
}
</script>
           

注：1.在子元件給父元件傳值時，一般都是借助$emit('監聽的時間名','觸發的方法名')，而且是在某種條件下響應，比如在某一個點選事件下。

//  ToSuper->監聽的事件名  this.childMsg ->傳遞過去的參數
this.$emit('ToSuper',this.childMsg);
           

2.在父元件中，使用v-on 監聽時間名

<ChildTemplate superMsg='我是父元件内容' v-on:ToSuper='passParam'></ChildTemplate>
           

3.在父元件中實作，監聽方法：

export default {
    name:'superTemplate',
    components:{
        ChildTemplate:ChildTemplate
    },
    data:function(){
        return {
            childMsg:''
        }
    },
    methods:{
        passParam:function(obj){
            this.childMsg = obj;
        }
    }
}
</script>
           

學習部落格：

https://www.jianshu.com/p/89bd18e44e73

https://www.cnblogs.com/chenhongshuang/p/8678207.html

https://www.cnblogs.com/changwoo/p/9895670.html