如何将参数传递给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组件并在组件模板中重新使用其值的主要内容,如果未能解决你的问题,请参考以下文章

如何将对象处理程序传递给 vue 组件

通过路由器将查询参数传递给vue组件

将特定的 $attrs 参数传递给 Vue 组件

将 Laravel 集合中的 id 参数传递给 Vue 组件

如何将带参数的函数传递给Angular中的内部组件

使用指令将参数传递给子组件角度