Vue 12-父子組件間數據傳遞

原創

2020-02-21 15:58

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <p>每次點擊加2</p>
        <!-- 父組件向子組件傳值要通過屬性的形式，如:count='0' -->
        <!-- count='0'表示字符串，而:count='0'表示js表達式所以是數字 -->
        <counter :count='0' @change='handleChange'></counter>
        <counter :count='0' @change='handleChange'></counter>
        <div>{{total}}</div>
    </div>
    <script>
        // 局部組件
        var counter = {
            props: ['count'],
            data: function(){
                return {
                    number: this.count
                }
            },
            template: '<div @click="handleClick">{{number}}</div>',
            methods:{
                handleClick: function(){
                    //每次點擊都會增加2
                    this.number = this.number +2;
                    // 子組件向父組件傳值應通過事件的形式，下面是傳2
                    this.$emit('change', 2);
                }
            }
        }

        // 父組件是Vue的根實例
        var vm = new Vue({
            el: '#root',
            data:{
                total:0
            },
            components:{
                counter: counter
            },
            methods:{
                handleChange: function(stepnum){
                    this.total += stepnum;
                }
            }
        })
        // Vue'單向數據流'：父組件可通過屬性向子組件傳遞參數，但子組件不能直接改變父組件傳來的數據，那兒子要用這數據咋辦呢？
        // 此時子組件可在自身data中定義參數接收父組件傳來的數據(等於複製一份數據)，再修改自己所定義的這個參數
        // 如上面兒子自定義number去接收父傳的count，後面要改就改number
    </script>
</body>
</html>