VUE中父組件向子組件傳遞數據 props使用

時間 2019-12-01

標籤 vue 組件傳遞數據 props 使用简体版

原文原文鏈接

VUE中，子組件是不能直接訪問父組件的數據（通常來講，固然若是你要破壞原則也是能夠）,以下<javascript

<body>
　　<div id="fathercomponent">
      <ul>
          <li v-for="item in fatherdatas">{{item}}</li> <!--父組件能夠訪問它本身的數據-->
      </ul>
      <child-component></child-component>
    </div>
</body>

<script type="text/javascript">
        Vue.component('child-component', {
           // template:'<ul><li v-for="item in fatherdatas"></li></ul>'//子組件不能訪問到父組件的數據
        })
        vm = new Vue({
            data: {
                fatherdatas: [1,2,3,4,5]
            }
        }).$mount('#fathercomponent');
 </script>

上面代碼 vm實例掛在了id 爲fathercomponent 的DIV中，至關於fathercomponent爲一個組件了，這個時候咱們在其中定義了一個另外一個新組件，這個新定義的組件，和原來的組件，即爲父子關係，暫且命名爲child-componentjava

咱們在vm 中定義的數據 fatherdatas，是父組件fathercomponent中的數據，能夠直接在父組件中引用，子組件內部是沒法訪問到fatherdatas數據的。若是咱們須要訪問這個fatherdatas須要經過props屬性來實現，具體以下數組

    <div id="fathercomponent">
        <ul>
            <li v-for="item in fatherdatas">{{item}}</li> <!--正確父組件能夠訪問它本身的數據-->
        </ul>
        <child-component :dataarr="fatherdatas"></child-component> <!--咱們將父組件中的fatherdatas數據傳給子組件中的dataarr-->
    </div>

  Vue.component('child-component', {
            props: ['dataarr'],//給props添加一個屬性，這個屬性名字是以前在組件標籤中加的
            template: '<ul><li v-for="item in dataarr">{{item}}</li></ul>' //這個時候父組件中的fatherdatas 已經傳遞給了當前組件的dataarr，這樣就能夠訪問了

        })
        vm = new Vue({
            data: {
                fatherdatas: [1,2,3,4,5]
            }
        }).$mount('#fathercomponent');

父組件傳遞給子組件，是按值傳遞，由於此時的值是一個對象地址，因此無論是改子組件中的dataarr，仍是改父組件fatherdatas，都會影響到另外一方，以下this

    <div id="fathercomponent">
        <ul>
            <li v-for="item in fatherdatas">{{item}}</li> <!--正確父組件能夠訪問它本身的數據-->
        </ul>
        <child-component :dataarr="fatherdatas" @father="getfatherdatas"></child-component> <!--咱們將父組件中的fatherdatas數據傳給子組件中的dataarr-->
    </div>                                      <!--定義一個father事件-->

        Vue.component('child-component', {
            props: ['dataarr'],//給props添加一個屬性，這個屬性名字是以前在組件標籤中加的
            template: '<ul><li v-for="item in dataarr">{{item}}</li></ul>', //這個時候父組件中的fatherdatas 已經傳遞給了當前組件的dataarr，這樣就能夠訪問了
            created: function () {
                this.dataarr.push(6);//子組件中的dataarr 添加一個數組元素
                this.$emit('father');//觸發組件的father事件
            }

        })
        vm = new Vue({
            methods: {
                getfatherdatas() {
                    console.log(this.fatherdatas.join(','));//輸出1,2,3,4,5,6
                }
            },
            data: {
                fatherdatas: [1,2,3,4,5]
            }
        }).$mount('#fathercomponent');

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。