允许在Vue.js

Question

多模态继在官方网站上的演示（http://vuejs.org/examples/modal.html）

我试图设置这让我可以在页面上定义多个模态窗口，这样

http://jsfiddle.net/m2sv4at5/

但由于modals['foo']和modals['bar']没有定义，Vue公司是投掷警告，它变得无效类型被送进道具。只要我用false为两者初始化脚本，它就可以工作，但这需要我将这些模式名称硬编码到脚本中，这正是我不想要的。

在jQuery中，我会通过定义一个数据目标并简单地确保匹配具有正确ID和modal类的元素，但我不确定如何在Vue中执行类似操作。

Answer 1

如果使用v-ref为模型组件分配参考ID，则该参考ID将可供父级使用，并且您可以通过参考该ID来设置show = true。如果这听起来很复杂：

<button id="show-show" @click="showModal('foo')">Show Foo</button> 

<modal v-ref:foo> 
    <h3 slot="header">Foo Header</h3> 
</modal> 

new Vue({ 
    el: '#app', 
    methods: { 
    showModal: function(name) { 
     this.$refs[name].show = true; 
    } 
    } 
}) 

http://jsfiddle.net/m2sv4at5/1/

Child Component Refs