vuejs - привязка к данным компонента - PullRequest
Новая
       8

vuejs - привязка к данным компонента

0 голосов
/ 29 апреля 2018

Я создал простой компонент:
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>)

Я предпочитаю не использовать событие для чего-то такого простого. Любой другой путь?

Ответы [ 2 ]

0 голосов
/ 29 апреля 2018

Существует несколько способов решения этой проблемы:

Использование событий

Обычно это лучший метод, как и ожидается другим разработчиком 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>
0 голосов
/ 29 апреля 2018

Вы можете отправить данные в слот. Посмотрите на этот пример: 

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/

...