Vue-在Vue實例中使用組件

Question

我是Vue.js ，我想知道這段代碼是否正確？

所以這是Vue一部分：

Vue.component('share-option', {
    props: ['text', 'func', 'icon'],
    template: '<div v-on:click="func" class="share-options__option">\
                    <img class="share-options__icon" v-bind:src="`/Resources/image/ico/` + icon" />\
                    <span class="share-options__text">{{text}}</span>\
                </div>'
});

var shareModule = new Vue({
    el: '#shareOptions',
    data: function () {
        return {
            optionOne: { text: 'option one', icon: 'ico_opt1.svg', func: this.sendOptionOne },
            optionOne: { text: 'option two', icon: 'ico_opt2.svg', func: this.sendOptionTwo }
        }
    },
    methods: {
        sendOptionOne: function () {
            console.log('one');
        },
        sendOptionTwo: function () {
            console.log('two');
        }
    }
});

我在html使用它是這樣的：

<share-option :text="optionOne.text" :func="optionOne.func" :icon="optionOne.icon"></share-option>
<share-option :text="optionTwo.text" :func="optionTwo.func" :icon="optionTwo.icon"></share-option>

我這樣做對嗎？

Answer 1

將vue實例中的數據更改為：

data: {
        optionOne: { text: 'option one', icon: 'ico_opt1.svg', func: this.sendOptionOne },
        optionTwo: { text: 'option two', icon: 'ico_opt2.svg', func: this.sendOptionTwo }
},

另一個選擇是：

data: function () {
        return {
            optionOne: { text: 'option one', icon: 'ico_opt1.svg', func: this.sendOptionOne },
            optionOne: { text: 'option two', icon: 'ico_opt2.svg', func: this.sendOptionTwo }
        }
    }(),

last ()將在適當位置執行該函數，並將返回的對象分配給data屬性。

雖然我不確定:func的計划是什么，但這仍然可以解決問題。

希望能幫助到你。