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>