javascript - Vue.js:组件中的默认数据始终被 v-with 覆盖

Question

我有一个包含下拉组件的语言选择器 View 。我想在下拉组件中设置一个默认属性 (isOpen)，然后包含来自语言选择器的计算数据，然后将其显示在下拉列表中。

但我似乎无法找到一种方法来在下拉组件中定义 isOpen 而不被语言选择器中的新数据覆盖。

以下是文件:

语言选择器.js

var model = require('model/language');
var uiDropdown = require('ui/dropdown');
var template = require('./index.html');

var vm = new Vue({
    template: template,
    components: {
        'ui-dropdown': uiDropdown
    },
    created: function() { self = this; },
    ready: init,
    data: function(){ return model; },
    computed: {
        dropdown: {
            get: function(){
                return {
                    options: (function(){
                        return model.options.map(function(option){
                            return { id: option.id, label: option.code }
                        })
                    }())
                ,   currentID: model.currentID
                ,   type: uiDropdown.opt.types.SMALL
                }
            }
        }
    }
});

语言选择器模板(index.html):

<div v-component="ui-dropdown" v-with="dropdown"></div>

dropdown.js(在data中定义了isOpen。我还尝试在created和ready<中定义它 Hook ，但它也不起作用):

var template = require('./index.html');

module.exports = {
    template: template,
    created: function() {
        self = this;
    },
    ready: init,
    methods: {
        onSelect: onSelect,
        onOpen: onOpen
    },
    data: function(){
        return {
            isOpen: false,
            type: types.SMALL
        }
    },
    computed: {
        currentLabel: {
            get: function(){
                var selectedModel = filterSelected(self.$data, self.$data.currentID);
                return self.$data.options[self.$data.currentID].label;
            }
        }
    },
    opt: {
        types: types
    }
}

最后是下拉模板(index.html):

<div class="dropdown {{ isOpen ? 'dropdown__open' : ''}}" v-class="type">
    <a v-on="click: onOpen" href="#" class="dropdown--label">
        {{ currentLabel }} {{ options.isOpen }}
        <span class="icon__dropdown"></span>
    </a>
    <ul class="dropdown--list">
        <li v-repeat="option: options" class="{{ currentID == option.id ? 'dropdown--list__current' : '' }}">
            <a v-on="click: onSelect" href="{{ option.id }}">
                {{ option.label }}
            </a>
        </li>
    </ul>
        </div>

这里是下拉组件 $data 的输出(缺少 isOpen):

Answer 1

From the VueJS Guide :

v-with can also be used with an argument in the form of v-with="childProp: parentProp". This means passing down parent[parentProp] to the child as child[childProp]

基本上，您可以使用 v-with 覆盖所有子组件的数据。您应该使用指令的第二种形式指定要覆盖的属性。