VUE组件之间的传值

我们先快速搭建父子组件

子组件

    <template> 
        <div> 
                <h3 style="color:red">I am  Son</h3>
        </div>
    </template>

    <script>
    export default {

    }
    </script>

    <style>

    </style>

父组件

    <template>
        <div>
            <h2>I  am  father</h2>
            <test></test>
        </div>
    </template>

    <script>
    import test from './Test'
    export default {
    components:{
        test
    }
    }
    </script>

    <style>

    </style>

先定义值并传递给子组件

    export default {
       data(){
          return{
             name:'father'
          }
        },
        components:{
            test
        }
    }

这边捎带提一下为什么data规定是一个函数而不是对象

Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了

javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响

如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;
两个实例应该有自己各自的域才对,了解浅拷贝的朋友应该很容易理解

往子组件中传递参数，通过v:bind（缩写：）绑定数据 并通过v-model修改数据方便测试

    <template>
        <div>
            <h2>I  am  father</h2>
            <p>
                <input type="text" v-model="name">
            </p>
            <test :name="name"></test>
        </div>
    </template>

    <script>
    import test from './Test'
    export default {
       data(){
          return{
             name:'father'
          }
        },
    components:{
        test
    }
    }
    </script>

    <style>

    </style>

在子组件中通过props接受 并可以直接使用插值表达式显示值

    <template>
        <div> 
                <h3 style="color:red">I am  Son</h3>
                {{name}}
        </div>
    </template>

    <script>
    export default {
        props:['name']
    }
    </script>

    <style>

    </style>

扩展props参数

    export default {
        props:{
            name:{
                type: String,        =>表示数据类型 如果为null支持一切格式
                default: 0,            =>默认值  如果父组件未传值默认的值
                required: true,      =>是否必须传递值
                validator: function (value) {    =>自定义验证函数（充当参数，此处name并不是函数，所以无需此参数）
                   console.log(value)
                }

            }
        }
    }

拆分一下

      props: {
        // 基础类型检测 (`null` 意思是任何类型都可以)
        propA: Number,
        // 多种类型
        propB: [String, Number],
        // 必传且是字符串
        propC: {
        type: String,
        required: true
        },
        // 数字，有默认值
        propD: {
        type: Number,
        default: 100
        },
        // 数组/对象的默认值应当由一个工厂函数返回
        propE: {
        type: Object,
        default: function () {
            return { message: 'hello' }
        }
        },
        // 自定义验证函数
        propF: {
        validator: function (value) {
            return value > 10
        }
        }
    }
    注意 props 会在组件实例创建之前进行

根据传递的数据类型设置相应的参数，一般情况下只需接收即可

    <script>
    export default {
        props:['name']  =>如有多个值直接在数组后方添加即可
    }
    </script>

props参数接受可直接使用插值表达式渲染

    <template>
        <div> 
                <h3 style="color:red">I am  Son</h3>
                {{name}}
                <p>
                    <input type="text" v-model="childName">
                </p>
                <p>
                    <button @click="change">change</button>
                </p>
        </div>
    </template>

    <script>
    export default {
        props:['name'],
        data(){
            return{
                childName:'child'
            }
        },
        methods:{
            change(){
                 //childByValue是在父组件on监听的方法
                 //第二个参数this.childName是需要传的值
                this.$emit('childByValue',this.childName) =>使用$emit创建方法 将this.childName为数据传递过去
            }
        }
    }
    </script>

    <style>

    </style>

父组件接收

        <div>
            <h2>I  am  father</h2>
            <p>
                <input type="text" v-model="name">
            </p>
            <test :name="name" @childByValue="childByValue"></test>  //此处的方法名 与 $emit设置的方法名相同             
                                         //注意方法是与$emit方法相同 而不是$emit方法与父组件设置的方法相同  逻辑不能搞错
        </div>
    </template>

    <script>
    import test from './Test'
    export default {
       data(){
          return{
             name:'father'
          }
        },
        methods:{
           childByValue: function (childValue) {  =>此参数便是 子组件传递的参数  此时name将修改为子组件传递的值
             // childValue就是子组件传过来的值
             this.name = childValue
             }
        },
    components:{
        test
    }
    }
    </script>

    <style>

    </style>

父组件还可以使用$event 修改数据

    <template>
        <div>
            <h2>I  am  father</h2>
            <p>
                <input type="text" v-model="name">
            </p>
            <test :name="name" @childByValue="name=$event"></test>  //$event可以理解为传递的参数   效果相同
        </div>
    </template>

    <script>
    import test from './Test'
    export default {
       data(){
          return{
             name:'father'
          }
        },
    components:{
        test
    }
    }
    </script>

    <style>

    </style>

兄弟组件数据传递

先看一下父组件

    <template>
        <div>
            <h2>I  am  father</h2>
            <p>
                <input type="text" v-model="name">
            </p>
            <hr>
            <test :name="name" @childByValue="name=$event"></test>  =>子组件
            <hr>
            <testone :name="name"></testone> =>子组件
        </div>
    </template>

    <script>
    import test from './Test'
    import testone from './Test1'
    export default {
       data(){
          return{
             name:'father'
          }
        },
    components:{
        test,
        testone
    }
    }
    </script>

    <style>

    </style>

test子组件

    <template>
        <div> 
                <h3 style="color:red">I am  Son</h3>
                {{name}}
                <p>
                    <input type="text" v-model="childName">
                </p>
                <p>
                    <button @click="change">change</button>
                </p>
        </div>
    </template>

    <script>
    export default {
        props:['name'],
        data(){
            return{
                childName:'child'
            }
        },
        methods:{
            change(){
                 // childByValue是在父组件on监听的方法
                 // 第二个参数this.childName是需要传的值
                this.$emit('childByValue',this.childName)
            }
        }
    }
    </script>

    <style>

    </style>

testone 子组件

    <template>
        <div> 
                <h3 style="color:red">I am  Son2</h3>
                {{name}}

        </div>
    </template>

    <script>
    export default {
        props:['name']
       
    }
    </script>

    <style>

    </style>

实现兄弟组件之间数据传递，不妨碍父组件

在src下新建js，引入vue 暴露实例

    import Vue from 'Vue'
    export default new Vue()  =>这样既可

在兄弟组件中导入此实例 import bus from './../eventBus.js'

首先我们先在传数据的兄弟组件中操作

    <template>
        <div> 
                <h3 style="color:red">I am  Son2</h3>
                {{name}}
                <p>
                    <button @click="change">changeBorther</button>
                </p>
        </div>
    </template>

    <script>
    import bus from './../eventBus.js'
    export default {
        props:['name'],
        methods:{
            change(){
                bus.$emit('changeBortherName','大哥莫慌，我来了')=>同样是两个参数
                =>注意此处是bus新vue实例  不是this
            }
        }
       
    }
    </script>

    <style>

    </style>

在另一个兄弟组件中监听此函数

    <template>
        <div> 
                <h3 style="color:red">I am  Son</h3>
                {{name}}
                <p>
                    <input type="text" v-model="childName">
                </p>
                <p>
                    <button @click="change">change</button>
                </p>
        </div>
    </template>

    <script>
    import bus from './../eventBus.js'
    export default {
        props:['name'],
        data(){
            return{
                childName:'child'
            }
        },
        methods:{
            change(){
                 // childByValue是在父组件on监听的方法
                 // 第二个参数this.childName是需要传的值
                this.$emit('childByValue',this.childName)
            }
        },
        created(){  =>利用vue生命周期函数机制 将方法写入生命函数之中
            bus.$on('changeBortherName',function(value){  =>注意 此处依旧是bus  通过$on 监听 $emit方法
                  console.log(value)  =>大哥莫慌，我来了  （得到数据了 可以自行利用即可）
            })
        }
    }
    </script>

    <style>

    </style>