vue中父子组件之间的传值

1. 父组件向子组件传值

vue组件中的传值是：单向流的，即父组件向子组件传值，同时子组件不可改变父组件传来的值，因为父组件的值不仅仅被一个子组件使用，子组件随意修改父组件的值，会影响到其他子组件的数据。

但是子组件可以clone该值，然后就可以随意改动使用

    <div id="app">
       <counter :count="2"></counter>
       <counter :count="3"></counter>   
    </div>
    <script>
        var counter = {
            props: ['count'],
            data: function(){
                return {
                    number: this.count //Clone the values of the parent component
                }
            },
            template: `<div @click="handle">{{number}}</div>`,
            methods: {
                handle(){
                    this.number ++
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            components: {
                counter // writing style of ES6  
            }
        })
    </script>

1.1 父组件向子组件传值可以进行校验（props特性）

    <div id="app">
       <counter count="str"></counter>  
    </div>
    <script>
        var counter = {
            props:{
                count: String
            },
            data: function(){
                return {
                    number: this.count
                }
            },
            template: `<div>{{number}}</div>`,
        }
        var vm = new Vue({
            el: '#app',
            components: {
                counter // writing style of ES6  
            }
        })
    </script>

结果：

注意：父组件中的count不是，如果是，那么str就是表达式，会报错str is not defined。而表示count的值是str，并且可以传入到子组件的props中。

（1）表示count必须是String类型。

（2）表示count必须是String或Number类型

（3）规定父组件传值时，规定count值的类型和是否必传

（4）如果required是false，则允许父组件不传入count，此时，可以设置的默认值才会生效

结果：

（5）对该值更精确的规定需要用validator

1.2  非props特性，子组件没有props属性，不接收父组件的传值。这样父组件中的count属性，就会成为子组件的属性：

    <div id="app">
       <counter count="hell"></counter>  
    </div>
    <script>
        var counter = {
            data: function(){
                return {
                    number: 'hello world'
                }
            },
            template: `<div>{{number}}</div>`,
        }
        var vm = new Vue({
            el: '#app',
            components: {
                counter // writing style of ES6  
            }
        })
    </script>

 2. 子组件可以通过$emit()方法，向父组件传值

    <div id="app">
       <counter :count="2" @change="perceptSonComponent"></counter>
       <counter :count="3" @change="perceptSonComponent"></counter>   
    </div>
    <script>
        var counter = {
            props: ['count'],
            data: function(){
                return {
                    number: this.count //Clone the values of the parent component
                }
            },
            template: `<div @click="handle">{{number}}</div>`,
            methods: {
                handle(){
                    this.number = this.number + 2;// Every click, the number increase 2 
                    this.$emit('change', 2);  //子组件将增加的2传给父组件
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            components: {
                counter // writing style of ES6  
            },
            methods: {
                perceptSonComponent(parameter){
                    console.log(parameter)
                }
            }
        })
    </script>