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 }
        }
    }(),

最后一个()将在适当位置执行该函数，并将返回的对象分配给data属性。

尽管我不确定:func的计划是什么，但这仍然可以解决问题。

希望有帮助。

Vue-在Vue实例中使用组件

1 个答案: