모/자 어셈블리 간의 데이터 전송

vue에는 단방향 데이터 흐름의 개념이 있다. 즉, 부모 구성 요소는 서브 구성 요소에 매개 변수를 전달/수정할 수 있지만 서브 구성 요소는 부모 구성 요소가 전달한 매개 변수를 반대로 수정할 수 없다!(서브어셈블리가 부모 어셈블리 참조 유형의 데이터를 변경할까 봐 다른 어셈블리에 영향을 줄 수 있습니다.)그럼 이 문제를 어떻게 해결합니까?서브어셈블리에 자신의 변수를 복사한 다음 서브어셈블리에서 자신의 변수를 수정할 수 있습니다.이것은 모 어셈블리가 서브어셈블리에 데이터를 전달하는 것입니다.



    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="./vue.js"/>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->


<div id="root">
    //  :              ,  js   ,  ,        <br/>
    <counter :count="1"/>
    <counter :count="2"/>
</div>
<script type="text/javascript">
    //                    

    //    ,    
    var counter = {
        props: ["count"], //              
        data: function() {
            return {
                number: this.count //      count  ,        data   number 
            }
        },
        /*template: "<div @click='handleClick'>{{count}}</div>",*/

        //                  ,        
        template: "<div @click='handleClick'>{{number}}</div>",
        methods: {
            handleClick: function() {
                /*//          ,    :                !
                this.count++ */

                //         number++,       count++
                this.number++
            }
        }
    }
    var vm = new Vue({
        el: "#root",
        components: {
            counter: counter
        }
    })
</script>

</code></pre>
<p>           :</p>
<pre><code>


    <title/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="./vue.js"/>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->


<div id="root">
    //  :              ,  js   ,  ,        <br/>
    //         ,  handleInc          <br/>
    <counter :count="3"/>
    <counter :count="2"/>
    <div>{{total}}</div>
</div>
<script type="text/javascript">
    //                    

    //    ,    
    var counter = {
        props: ["count"], 
        data: function() {
            return {
                number: this.count 
            }
        },

        //                  ,        
        template: "<div @click='handleClick'>{{number}}</div>",
        methods: {
            handleClick: function() {
                this.number++
                //     ,  change  ,     ,     1(        ,     change)
                this.$emit("change", 1)
            }
        }
    }
    var vm = new Vue({
        el: "#root",
        components: {
            counter: counter
        },
        data: {
            total: 5
        },
        methods: {
            //          step(   this.$emit("change", 1)  1),         ,     step
            handleInc: function(step) { 
                this.total += step
            }
        }
    })
</script>

</code></pre>
</div>
</div>
</div>
</div>

좋은 웹페이지 즐겨찾기