1. 程式人生 > >vue子元件怎麼呼叫父元件的方法

vue子元件怎麼呼叫父元件的方法

 

在Vue2中元件的props的資料流動改為了只能單向流動,即只能由元件外(呼叫元件方)通過元件的DOM屬性attribute傳遞props給元件內,元件內只能被動接收元件外傳遞過來的資料,並且在元件內,不能修改由外層傳來的props資料。

可以通過 $emit向父元件觸發一個事件

涉及到元件之間的通訊的問題。元件之間的通訊可以分為以下幾種:

  1. 父子元件傳遞,父向子傳遞採用props,子向父採用事件emit

  2. 非父子元件的傳遞,全域性Event bus,new一個vue的例項,採用事件的方式通訊,再者採用vuex全域性狀態管理

  3. $emit

    向父元件觸發一個事件,父元件監聽這個事件就行了。

  4. 直接用this.$parent.xxxx這樣直接呼叫父元件的方法

    <template id="">
        <child @refreshList="onRefresList"></child>
    </template>
    
    <script>
        export default {
            data () {
                return {
                    
                };
            },
            components: {
                Child
            },
            mounted() {},
            methods: {
                onRefresList () {
                    
                }
            },
            computed: {},
            watch: {}
        };
    </script>

    Child.vue

    this.$emit('refreshList');