如何将参数传递给Vue组件并在组件模板中重新使用其值
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将参数传递给Vue组件并在组件模板中重新使用其值相关的知识,希望对你有一定的参考价值。
我对Vue非常陌生。我正在尝试学习如何创建和重用Vue组件。传递给组件的初始数据不会在click事件上更新。这是我的代码(https://jsfiddle.net/gpawel/486ysvxj/33/的完整版本)我做错了什么?谢谢。
<div id="components-demo">
<button-counter count='3'></button-counter>
<br><br>
<button-counter count='4'></button-counter>
</div>
Vue.component('button-counter',
props: ['count'],
methods:
add: function()
return count: count++
,
template: '<button v-on:click="add()">You clicked me count times.</button>'
)
new Vue(
el: '#components-demo'
)
答案
请参阅更新的fiddle。您将直接更改count属性,先将其另存为数据,然后更改internalCount。另外,请使用:
将prop强制转换为Number而不是字符串。
props: ['count'],
data()
return
internalCount: this.count
,
methods:
add: function()
return
count: this.internalCount++
,
另一答案
这里是工作小提琴:https://jsfiddle.net/68p1u9ks/
Vue.component('button-counter',
props: ['initialCount'],
data: function ()
return
count: 0,
,
methods:
add: function()
this.count++
,
,
created()
this.count = this.initialCount
,
template: '<button v-on:click="add()">You clicked me count times.</button>'
)
我认为您需要维护button-counter
组件内部的状态。还将count
属性重命名为initial-count
。
<div id="components-demo">
<button-counter :initial-count='3'></button-counter>
<br><br>
<button-counter :initial-count='4'></button-counter>
</div>
另一答案
您无法在子组件中更改道具。您应该使用$emit
更改道具:
父组件:
<template>
<div>
<child :count="count" @add="add" />
</div>
</template>
<script>
export default
data: () => (
count: 1
),
methods:
add()
this.count = this.count + 1;
</script>
和子组件:
<template>
<button v-on:click="add()">You clicked me inComponentCount times.</button>
</template>
<script>
export default
props: [count],
computed:
inComponentCount()
return this.count;
,
methods:
add()
this.$emit('count')
</script>
以上是关于如何将参数传递给Vue组件并在组件模板中重新使用其值的主要内容,如果未能解决你的问题,请参考以下文章