Question

无法找到从组件外部更新特定组件的道具的方法。

我有App.js以.vue格式加载所有组件。我基本上做的是在counter.vue内导入App.js，并希望修改其中一个特定组件的数据。

主档App.js：

Vue.component('counter', require('./components/Counter.vue'));

export const App = window.App = new Vue({
    el: '#app',

    methods: {

    }
});

这是Counter.vue文件：

<template>
    <span class="counter">{{ number }}</span>
</template>

<script>
    export default {
        props: ['name', 'number'],
    };
</script>

在我的HTML中，我有多个counter个实例：

<counter name="cnameA" number="10"></counter>
<counter name="cnameB" number="20"></counter>
<counter name="cnameC" number="30"></counter>

如何将名称为cnameB的计数器增加1？

我尝试使用#watch方法，但这并不是我所需要的。

Answer 1

将要增加的数字绑定到数据属性，然后增加该属性：

＆＃13;

Vue.component('counter', {
  template: `<span class="counter">{{ number }}</span>`,
  props: ['name', 'number'],
});

new Vue({
  el: '#app',
  data() {
    return {
      foo: 20,
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <counter name="cnameA" number="10"></counter>
  <counter name="cnameB" :number="foo"></counter>
  <counter name="cnameC" number="30"></counter>

  <button @click="foo++">Increase Second Counter</button>
</div>

＆＃13;

从外部

1 个答案: