[英]Vue.js component with dynamic template (e.g. eventhandler)
lets say I made a compontent called test and inserted this into my html like so:假设我制作了一个名为 test 的组件并将其插入到我的 html 中,如下所示:
<test :data="foo"></test>
How can I achieve that the on-click attribute value changes into the property value 'data'?如何实现单击属性值更改为属性值“数据”?
Vue.component('test', {
props: ['data'],
template: '<div v-for="element in {{foo}}" >></div>'
});
Just to outline my expectations - this is what I am looking for:只是为了概述我的期望 - 这就是我正在寻找的:
<test :data="bar"></test>
<test :data="hello"></test>
renders to呈现为
<div v-for="element in bar" ></div>
<div v-for="element in hello" ></div>
BTW: Thanks to everyone participates here in SO :)顺便说一句:感谢大家在这里参与 SO :)
Parent:家长:
<test :data="foo" @onMyEvent="data=$event"></test>
Child component:子组件:
Vue.component('test', {
props: ['data'],
template: '<div @click="$emit(\'onMyEvent\', \'bar\')"></div>'
});
Based on your edits:根据您的编辑:
//Parent
<template>
<div>
<test :data="foo"></test>
<test :data="bar"></test>
<!-- or -->
<test v-for="item in [foo, bar]" :data="item"></test>
</div>
</template>
<script>
import Test from './Test.vue'
export default{
data(){
return {
foo: ['foo-0', 'foo-1', 'foo-2', 'foo-3'],
bar: ['bar-0', 'bar-1', 'bar-2', 'bar-3'],
}
},
components: {
test: Test
}
}
</script>
//Child component
<template>
<div>
<div v-for="element in data">{{ element }}</div>
</div>
</template>
<script>
export default{
props: ['data'],
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.