Cách gọi hàm trên thành phần con trên các sự kiện cha

Bối cảnh

Trong Vue 2.0, tài liệu và khác chỉ rõ rằng giao tiếp từ cha mẹ đến con xảy ra thông qua các đạo cụ.

Câu hỏi

Làm thế nào để cha mẹ nói với con của nó một sự kiện đã xảy ra thông qua đạo cụ?

Tôi có nên xem một sự kiện được gọi là sự kiện? Điều đó không cảm thấy đúng, cũng không thay thế ( $emit/$on dành cho trẻ em cho cha mẹ và mô hình trung tâm dành cho các yếu tố ở xa).

Thí dụ

Tôi có một bộ chứa cha mẹ và nó cần nói với bộ chứa con của nó rằng có thể thực hiện một số hành động nhất định trên API. Tôi cần để có thể kích hoạt các chức năng.

Cung cấp cho thành phần con a refvà sử dụng $refsđể gọi một phương thức trên thành phần con trực tiếp.

html:

<div id="app">
  <child-component ref="childComponent"></child-component>
  <button @click="click">Click</button>  
</div>

javascript:

var ChildComponent = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  },
  methods: {
    click: function() {
        this.$refs.childComponent.setValue(2.0);
    }
  }
})

Để biết thêm thông tin, xem tài liệu Vue về refs .

Những gì bạn đang mô tả là một sự thay đổi trạng thái trong cha mẹ. Bạn truyền nó cho đứa trẻ thông qua một chỗ dựa. Như bạn đề xuất, bạn sẽ watchchống đỡ. Khi đứa trẻ hành động, nó thông báo cho cha mẹ thông qua một emit, và sau đó cha mẹ có thể thay đổi trạng thái một lần nữa.

var Child = {
  template: '<div>{{counter}}</div>',
  props: ['canI'],
  data: function () {
    return {
      counter: 0
    };
  },
  watch: {
    canI: function () {
      if (this.canI) {
        ++this.counter;
        this.$emit('increment');
      }
    }
  }
}
new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  data: {
    childState: false
  },
  methods: {
    permitChild: function () {
      this.childState = true;
    },
    lockChild: function () {
      this.childState = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
<my-component :can-I="childState" v-on:increment="lockChild"></my-component>
<button @click="permitChild">Go</button>
</div>

Nếu bạn thực sự muốn truyền sự kiện cho một đứa trẻ, bạn có thể làm điều đó bằng cách tạo một chiếc xe buýt (chỉ là một ví dụ Vue) và truyền nó cho đứa trẻ như một chỗ dựa .

Bạn có thể sử dụng $emitvà $on. Sử dụng mã @RoyJ:

html:

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>  
</div>

javascript:

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  },
  created: function() {
    this.$parent.$on('update', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
    click: function() {
        this.$emit('update', 7);
    }
  }
})

Ví dụ chạy: https://jsfiddle.net/rjurado/m2spy60r/1/

Nếu bạn có thời gian, hãy sử dụng cửa hàng Vuex để xem các biến (hay còn gọi là trạng thái) hoặc kích hoạt (hay gửi đi) một hành động trực tiếp.

Không thích cách tiếp cận xe buýt sự kiện bằng cách sử dụng $oncác ràng buộc ở trẻ em trong thời gian create. Tại sao? Các createcuộc gọi tiếp theo (tôi đang sử dụng vue-router) liên kết trình xử lý tin nhắn nhiều lần - dẫn đến nhiều phản hồi cho mỗi tin nhắn.

Giải pháp chính thống của việc truyền đạo cụ từ cha mẹ sang con cái và đặt một người theo dõi tài sản ở trẻ làm việc một chút tốt hơn . Vấn đề duy nhất là đứa trẻ chỉ có thể hành động chuyển đổi giá trị. Truyền cùng một thông điệp nhiều lần cần một số loại sổ sách kế toán để buộc chuyển đổi để trẻ có thể nhận được sự thay đổi.

Tôi đã thấy rằng nếu tôi gói tin nhắn trong một mảng, nó sẽ luôn kích hoạt trình theo dõi con - ngay cả khi giá trị vẫn giữ nguyên.

Cha mẹ:

{
   data: function() {
      msgChild: null,
   },
   methods: {
      mMessageDoIt: function() {
         this.msgChild = ['doIt'];
      }
   }   
   ...
}

Đứa trẻ:

{
   props: ['msgChild'],
   watch: {
      'msgChild': function(arMsg) {
         console.log(arMsg[0]);
      }
   }
}

HTML:

<parent>
   <child v-bind="{ 'msgChild': msgChild }"></child>
</parent>

Một cách đơn giản để gọi các phương thức trên các thành phần con là bằng cách phát ra một trình xử lý từ đứa trẻ và sau đó gọi nó từ cha mẹ.

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
  	setValue(value) {
    	this.value = value;
    }
  },
  created() {
    this.$emit('handler', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
  	setValueHandler(fn) {
    	this.setter = fn
    },
    click() {
    	this.setter(70)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <my-component @handler="setValueHandler"></my-component>
  <button @click="click">Click</button>  
</div>

Phụ huynh theo dõi các chức năng xử lý con và gọi bất cứ khi nào cần thiết.

Ví dụ dưới đây là tự giải thích. trong đó refs và sự kiện có thể được sử dụng để gọi hàm từ và đến cha mẹ và con.

// PARENT
<template>
  <parent>
    <child
      @onChange="childCallBack"
      ref="childRef"
      :data="moduleData"
    />
    <button @click="callChild">Call Method in child</button>
  </parent>
</template>

<script>
export default {
  methods: {
    callChild() {
      this.$refs.childRef.childMethod('Hi from parent');
    },
    childCallBack(message) {
      console.log('message from child', message);
    }
  }
};
</script>

// CHILD
<template>
  <child>
    <button @click="callParent">Call Parent</button>
  </child>
</template>

<script>
export default {
  methods: {
    callParent() {
      this.$emit('onChange', 'hi from child');
    },
    childMethod(message) {
      console.log('message from parent', message);
    }
  }
}
</script>

Tôi nghĩ rằng chúng ta nên có sự cân nhắc về sự cần thiết của cha mẹ khi sử dụng các phương pháp của trẻ. Thực tế, cha mẹ không cần quan tâm đến phương pháp của trẻ, nhưng có thể coi thành phần con là một thành phần FSA (máy trạng thái hữu hạn). để kiểm soát trạng thái của thành phần con. Vì vậy, giải pháp để xem thay đổi trạng thái hoặc chỉ cần sử dụng chức năng tính toán là đủ

bạn có thể sử dụng khóa để tải lại thành phần con bằng khóa

<component :is="child1" :filter="filter" :key="componentKey"></component>

Nếu bạn muốn tải lại thành phần với bộ lọc mới, nếu nhấp vào nút, hãy lọc thành phần con

reloadData() {            
   this.filter = ['filter1','filter2']
   this.componentKey += 1;  
},

và sử dụng bộ lọc để kích hoạt chức năng