vue组件传值的三种方式

一：父组件给子组件传值

1：这是父组件页面把actionNum数组内容传递给子页面，这里由于父组件加载的原因我们使用v-if

<template>

    <div class="home">

        <p @click="getMessage">点我把数据传递给子组件</p>

        <child-view v-if="showChild" v-bind:transmit="actionNum"></child-view>

    </div>

</template>

<script>

import childView from './user.vue'

export default{

    components:{

        childView

    },

    data(){

        return{

            actionNum:[

                {id:'1',name:'小明'},

                {id:'2',name:'小花'},

                {id:'3',name:'小白'},

                {id:'4',name:'小黑'},

            ],

            showChild:false

        }

    },

    created(){},

    methods:{

        getMessage(){

            this.showChild = true

        }

    }

}

</script>

2：这是子页面内容：

<template>
    <div>
        <div class="userBox">
            <p v-for="(item,index) in transmit" :key="index">{{item.name}}</p>
        </div>
    </div>
</template>
<script>

export default {
    props:{
        transmit:{
            type: Array,
            required:true
        }
    },
    data(){
        return{
            message:null
        }
    },
    methods:{
        
    }
}
</script>

二：子组件给父组件传值

1：子组件内容：用$emit发送要传的数据

<template>
    <div>
        <div class="userBox">
            <p v-for="(item,index) in transmit" :key="index">{{item.name}}</p>
            <button @click="getData">点我给父组件传值</button>
        </div>
    </div>
</template>
<script>

export default {
    props:{
        transmit:{
            type: Array,
            required:true
        }
    },
    data(){
        return{
            message:false
        }
    },
    methods:{
        getData(){
            this.$emit('childData',this.message)
        }
    }
}
</script>

2：父组件内容用v-on绑定事件

<template>
    <div class="home">
        <p @click="getMessage">点我把数据传递给子组件</p>
        <child-view v-if="showChild" v-bind:transmit="actionNum" v-on:childData="getChild"></child-view>
    </div>
</template>
<script>
import childView from './user.vue'
export default{
    components:{
        childView
    },
    data(){
        return{
            actionNum:[
                {id:'1',name:'小明'},
                {id:'2',name:'小花'},
                {id:'3',name:'小白'},
                {id:'4',name:'小黑'},
            ],
            showChild:false
        }
    },
    created(){},
    methods:{
        getMessage(){
            this.showChild = true
        },
        getChild(val){
            this.showChild = val
        }
    }
}
</script>

三：非父子级组件传值用中央事件总线

1：首先新建一个js文件

import Vue from 'vue'
export default new Vue()

2：在模块中引入两个组件便于观察数据：

<template>
    <div>
        <user-view></user-view>
        <file-view></file-view>
    </div>
</template>
<script>
import fileView from './file'
import userView from './user'
export default{
    components: {
        fileView,
        userView
    },
    data(){
        return{
            message:'首页'
        }
    },
    created(){},
    methods:{
    }
}
</script>
<style scoped>
</style>

3：在组件中引入新建的js文件

（1）：这是user.vue组件内容 使用$emit发送

<template>
    <div>
        <button @click="changeData">这是第一个组件，点我传值给另一个组件{{dataMassage}}</button>
    </div>
</template>

<script>
import eventBus from "../../Public/index.js"
export default {
    data () {
        return {
            dataMassage:'小明'
        }
    },
    methods:{
        changeData(){
            eventBus.$emit('changeTitle',this.dataMassage)
        }
    }
}
</script>

（2）：这是另一个组件file.vue内容 用$on接收

<template>
    <p>这是另一个组件，穿过来的值为{{title}}</p>
</template>

<script>
import eventBus from "../../Public/index.js"
export default {
    data(){
        return {
            title:''
        }
    },
    created () {
        eventBus.$on('changeTitle',(val)=>{
            this.title = val
        })
    }
}
</script>

以上三种方式在vue项目中总是遇到，涉及多页面传值，以及大量数据需要管理的一定要用vuex,

关于vuex还在更新中。。。。。。