vue组件之间的传值

1.vue非父子组价传值

非父子组件传值需要定义公共的实例文件sors.js,作为中间仓库来传值，要不然组件之间达不到传值效果。

公共sors.js

//sors.js
import vue from 'vue'
export default new Vue()

组件A：

<template>
    <div>
        A组件：
        <span>{{elementValue}}</span>
        <input type='button' value='点击' @click='onElement'>
    </div>
</template>
<script>
    //引入公共文件sors.js，来作为中间传达的桥梁
    import Sors from './sors.js'
    export default {
        data(){
            return {
                elementValue:1
            }
        },
        methods:{
            onElement:function(){
                Sors.$emit('result',this.elementValue)
            }
        }
    }
</script>

组件B：

<template>
    <div>
        B组件：
        <input type='button' value='点击' @click='getData'>
        <span>{{name}}</span>
    </div>
</template>
<script>
    //引入公共文件sors.js，来作为中间传达的桥梁
    import Sors from './sors.js'
    export default {
        data(){
            return {
                name:0
            }
        },
        mounted:function(){
            //使用$on来接收参数
            var that = this;
           Sors.$on('val',(data)=>{
               that.name = data 
            })
        }
        methods:{
            getData:function(){
               this.name++
            }
        }
    }
</sccript>

2.vue父组件给子组件传值

父组件：

<template>
    <div>
        父组件：
        <input type='text' v-model='name'>
        

        <!-- 引入子组件 -->
        <child :inputName ='name'></child>
    </div>
</template>
<script>
    import Child './child'
    export default {
        components:{
            Child 
        },
        data(){
            return {
                name:''
            }
        }
    }
</script>

子组件：

<template>
    <div>
        子组件：
        <span>{{inputName}}</span>
    </div>
</template>
<script>
    import Child './child'
    export default {
        //接收父组件传过来的值
        props:{
            inputName:String,//接受的数据类型
            required:true
        }
    }
</script>

3.子组件给父组件传值

子组件：

<template>
    <div>
        子组件：
        <span>{{childValue}}</span>
        <!-- 定义一个子组件传值的方法-->
        <input type='button' value='点击' @click='onChild'>
        
    </div>
</template>
<script>
    export default {
        data(){
            return {
                childValue:'我是子组件的数据'
            }
        },
        methods:{
            onChild () {
               //childByValue是在父组件on监听的方法
               //第二个参数this.childValue是需要传的值
               this.$emit('childByValue',this.childValue)
            }
        }
    }
</sccript>

父组件：

<template>
    <div>
        父组件：
        <span>{{name}}</span>
        <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
        <child v-on:childByValue = 'childByValue'></child>
        
    </div>
</template>
<script>
import child from './child'
    export default {
        components:{
            child
        },
        data(){
            return {
                name:''
            }
        },
        methods:{
            childByValue:function (childValue) {
               //childValue是在子组件传递过来的值
               this.name = childValue
            }
        }
    }
</sccript>