vue 中如何修改传给component中的属性的值并赋值到template中

记录下来加强记忆
在外面引用option-item-template模板并传值进去，然后在component中对值进行修改然后在赋值到template

下面是外面引用的写法

模板部分的代码

Vue.component('option-item-template', {
    props: ['item', 'optionitems', 'answer','hassub'],
    data: function () {
        return {
            classname: {
                "choose-content": true,
                "stan-answer": false
            }
        }
    },
    watch: {
        hassub: function (newValue, oldValue) {//当hassub属性的值发生改变时会执行下面的代码
            this.changeStanAnswer(newValue, this.answer);
        }
    },
    mounted: function () {//模块编译/挂载之后执行
        this.changeStanAnswer(this.hassub,this.answer);
    },
    methods: {
        changeStanAnswer: function (sub, answer) {
            if (sub && (answer.indexOf(this.optionitems.chooseName) != -1)) {
                this.classname = {
                    "choose-content": true,
                    "stan-answer": true
                };
            } else {
                this.classname = {
                    "choose-content": true,
                    "stan-answer": false
                };
            }
        }
    },
    template: '
'
        + ''
        + ''
        + ''
        + '{{optionitems.chooseName}}'
        + ''
        + '{{optionitems.selectName}}'
        + '![在这里插入图片描述]()'
        + ''
        + '
'
});

由上面的代码所示，根据传进来的值hassub，和optionitems.chooseName的值来拼成最后需要加载的样式及class的值。
hassub的值是会变化的，同时需要根据改变的值加载不同的样式就需要在watch中监听hassub的值，当它的值发生改变时同时也改变class的值。