vuejs-绑定到组件数据

Question

我创建了一个简单的组件：
https://jsfiddle.net/s08yhcda/1/

<div id="app">
  <button-counter>My counter: <span v-text="count"></span></button-counter>
</div>

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++"><slot></slot></button>'
})

// boot up the demo
var demo = new Vue({
  el: '#app'
})

但是我无法绑定到内部组件数据（计数器）。 组件如何将其数据公开给<slot>范围？ 我知道“事件增加，道具减少”的想法。 但是我仍然认为有可能在其范围内（在<button-counter>元素内）绑定组件数据。

我宁愿不要将事件用于简单的事情。 还有其他方法吗？

Answer 1

有多种方法可以解决此问题：

使用事件

正如其他Vue开发人员所期望的那样，这通常是最好的方法

 // Define a new component called button-counter Vue.component('button-counter', { data: function () { return { count: 0 } }, methods: { click() { this.count++; this.$emit('input', this.count); }, }, template: '<button v-on:click="click"><slot></slot></button>' }) // boot up the demo var demo = new Vue({ data() { return { count: 0, }; }, el: '#app' }); 

 <!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <button-counter @input="count = $event">My counter: <span v-text="count"></span></button-counter> </div> 

使用参考：

 // Define a new component called button-counter Vue.component('button-counter', { data: function () { return { count: 0 } }, methods: { click() { this.count++; }, }, template: '<button v-on:click="click"><slot></slot></button>' }) // boot up the demo var demo = new Vue({ data() { return { mounted: false, }; }, mounted() { this.mounted = true; }, computed: { count() { return this.mounted ? this.$refs.counter.count : 0; }, }, el: '#app' }); 

 <!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <button-counter ref="counter">My counter: <span v-text="count"></span></button-counter> </div> 

使用slot-scope

使用插槽范围，可以将多个参数传递给父插槽：

 // Define a new component called button-counter Vue.component('button-counter', { data: function () { return { count: 0 } }, methods: { click() { this.count++; }, }, template: '<button v-on:click="click"><slot :count="count"></slot></button>' }) // boot up the demo var demo = new Vue({ el: '#app' }); 

 <!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <button-counter> <span slot-scope="prop"> My counter: <span v-text="prop.count"></span> </span> </button-counter> </div> 

Answer 2

您可以将数据发送到插槽。 看这个例子：

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++"><slot :count="count" /></button>'
})

<div id="app">
  <button-counter>
    <template scope="props">
      My counter: <span>{{ props.count }}</span>
    </template>
  </button-counter>
</div>

https://jsfiddle.net/s08yhcda/2/