Vue - 組件之間的傳值方式

在vue項目中，組件之間的傳值是很是經常使用且重要的，本文主要介紹一下各類組件之間的傳值方式

1.父組件向子組件傳值

父組件: fatherPage.vue

<template>
    <!-- 引入子組件 -->        
    <add-course :classCourseName="classCourseName"></add-course>
</template>
<script>
    import addCourse from './addCourse'
    export default {
        name: 'index',
        data() {
            return {
                
            }
        },
        components: {
            addCourse
        }
    }
</script>複製代碼

子組件addCourse.vue

<template>
   <div class="up_load_dialog"> 
        <span>{{classCourseName}}</span>
   </div>
</template>
<script>
    export default {
        name: 'addCourseIndex',
        props: {
            //從父組件接收值
            classCourseName: {
                type: String,
                default: ()=>{
                    return ''
                }
            }
        },
        data(){
            return {

            }
        }
    }
</script>複製代碼

2.子組件向父組件傳值

子組件addCourse.vue

<template>
    <div class="up_load_dialog">
        <span @click="setNewCourse"></span>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                childName: '我是子組件的數據'
            }
        },
        methods: {
            setNewCourse() {
                //經過emit的getValue方法將值childName傳給父組件
                this.$emit('getValue', this.childName)
            }
        }
    }
</script>複製代碼

父組件fatherPage.vue

<template>
    <add-course @getValue="getValue"></add-course>
</template>
<script>
    export default {
        data(){
            return {
                name: ''
            }
        },
        methods: {
            getValue(value) {
                this.name = value
                alert("成功接收到子組件傳來的值")
            }
        }
    }
</script>複製代碼

3.非父子組件之間傳值

公共組件在config中加入event-bus.js

import Vue from 'vue'
let eventBus = new Vue();
eventBus.install = function (vue, options) {    
    Vue.prototype.$eventBus = Vue.eventBus = eventBus;
}
export default eventBus複製代碼

在main.js中引入event-bus.js

const Vue = require('vue')
import router from './router'
import store from './store'
const Vuetify = require('vuetify')
import 'material-design-icons-iconfont'
import '../src/assets/css/base.css'
import ajax from './config/fetch.js'
import './config/filters.js'
import './config/directives'
import api from './config/api/index'
const echarts = require('echarts/lib/echarts')
import common from './config/common'
import EventBus from './config/event-bus.js'
...
Vue.use(EventBus);複製代碼

若是不想用以上的方式，也能夠建一個eventBus.js，而後在每一個須要用到的頁面引入該文件也能夠

傳值的particialAnalysis.vue

<template>    
    <div class="edit-partial-analysis">        
        <div class="edit-score-title clear">            
            <h3>偏科分析</h3>            
            <div class="edit-score-button">                
                <span class="edit-score-button-save" @click="saveScorePage">保存</span>            
            </div>         
    </div>
</template>
<script>
    export default {    
        name: 'editPartialAnalysis',    
        data() {        
            return {            
                number: ''       
            }    
        },     
        methods: {        
            // 保存設置的分數段        
            saveScorePage() {            
                this.$eventBus.$emit('editParamsButton', false); //傳給兄弟editModule，告知隱藏設置參數頁面                   
            },    
        }
    }
</script>複製代碼

接收值的editModule.vue

<template>    
    <div class="score-analysis-con-one" :class="{hideSetAndParams: editParamsHideButton == true}">            
        <span v-if="editParamsHideButton">接收eventBus傳過來的值</span>  
    </div>
</template>   複製代碼

<script>        
    export default {        
    name: 'index',     
    data() {            
        return {                 
            editParamsHideButton: true,            
        }        
    },        
    mounted() {            
        //設置參數頁面點擊返回隱藏設置參數的頁面            
        this.$eventBus.$on('editParamsButton',(data)=>{                
            this.editParamsHideButton = data;            
        })        
    },   
}
</script>複製代碼

差很少就這樣了，下次再寫一下vuex的存值，加上組件傳值，真的敲好用~