vue $emit bug

vue $emit bug

https://www.cnblogs.com/xgqfrms/p/11146189.html

solution

https://forum.vuejs.org/t/emit-not-working/14680/2

watch & lowcase

parent component

child component

vue &$emit

event bus

https://www.telerik.com/blogs/how-to-emit-data-in-vue-beyond-the-vuejs-documentation

https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/

vue & watch

deep: true,

https://juejin.im/post/5b3cd8355188251b105ad14b

---

modal demo

    <!-- modal -->
    <FormModal
      :dialogFormVisible="dialogFormVisible"
      :dialogFormData="dialogFormData"
      @close-put-item="closePutItem"
      @save-put-item="savePutItem"
    />
    <!-- <FormModal
      :dialogFormVisible="dialogFormVisible"
      :dialogFormData="dialogFormData"
      :closePutItem="closePutItem"
      :savePutItem="savePutItem"
    /> -->

    methods: {
      init() {
        //
      },
      closeForm() {
        // this.visible = false;
        console.log(`close modal`);
        // this.$emit(`closePutItem`);
        // this.$emit(`close-putItem`);
        this.$emit(`close-put-item`);
      },
      saveForm() {
        // this.visible = false;
        console.log(`save form`);
        // this.$emit(`savePutItem`, {abc: 123});
        this.$emit(`save-put-item`, {abc: 123});
      },
    },
    mounted() {
      this.init();
      this.visible = this.dialogFormVisible;
    },
    created() {
      this.visible = this.dialogFormVisible;
      // const {
      //   dialogFormVisible,
      //   dialogFormData,
      // } = this;
      // this.visible = this.dialogFormVisible;
      // this.form = dialogFormData;
    },
     watch: {
      dialogFormVisible(newProp, oldProp){
        console.log(`newProp, oldProp`, newProp, oldProp)
        this.visible = newProp;
      }
    },

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---