Question

我正在用Vue构建简单的模态组件。我想在父级组件中使用此组件，并能够从父级切换它。

这是我现在的模态组件代码：

Public Overridable Property Employees As ObservableCollection (Of Employee)
        Get
            Return _Employees
        End Get
        Set(ByVal value As ObservableCollection (Of Employee))
            _Employees = value
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("Employees"))
        End Set
    End Property

<script>
export default {
	name: 'Modal',
	data() {
		return {
			modalOpen: true,
		}
	},
	methods: {
		modalToggle() {
			this.modalOpen = !this.modalOpen
		},
	},
}
</script>

我使用 v-if 切换渲染，它可以与我在模态组件内部创建的按钮一起使用。

但是我的问题是：我不知道如何通过父组件的简单按钮来切换它。我不知道如何从模态组件访问modalOpen数据

Answer 1

好的，让我们尝试做正确的事。我建议使用成熟的组件，并使用父组件或其他包含组件中的v模型控制模式窗口的打开和关闭。

1）我们需要在子属性“ props”中声明prop-“ value”。

<script>
export default {
    name: 'Modal',
    props: ["value"],
    data() {
        return {
            modalOpen: true,
        }
    },
    methods: {
        modalToggle() {
            this.modalOpen = !this.modalOpen
        },
    },
}
</script>

2）替换为以下内容的“ modalToggle”

：

modalToggle() {
  this.$emit('input', !this.value);
}

3）在父组件或其他组件中，声明“ modal = false”变量，并在组件v-model =“ modal”上使用，并在模态变量中使用任何控制按钮。

摘要

<template>
    <div v-if="value" class="modal">
        <div class="body">
            body
        </div>
        <div class="btn_cancel" @click="modalToggle">
            <i class="icon icon-cancel" />
        </div>
    </div>
</template>

<script>
export default {
  name: "Modal",
  props: ["value"],
  methods: {
    modalToggle() {
      this.$emit("input", !this.value);
    }
  }
};
</script>

示例：

Vue.component('modal', {
  template: '<div v-if="value" class="modal"><div class="body">modal body</div><div class="btn_cancel" @click="modalToggle">close modal<i class="icon icon-cancel" /></div></div>',
  props: ["value"],
	methods: {
		modalToggle() {
      this.$emit('input', !this.value);
		}
	}
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app',
  data:() =>({
  modal: false
  }),
  methods: {
  openModal() {
  this.modal = !this.modal;
  }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div @click="openModal">Btn modal</div>
  
  <modal v-model="modal"></modal>
</div>

Answer 2

对于当前的实现，我建议您使用引用 https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

因此，在您的父组件中，将ref="child"添加到模式（子）组件，然后通过调用this.$refs.child.modalToggle()

打开您的模式

Answer 3

您可以使用“激活器”插槽
您可以在子级上使用ref =“ xxx”并从父级访问它

在父组件中使用的Vue模态组件

3 个答案: