Question

我正在使用vue-cordova-webpack（https://github.com/OnsenUI/vue-cordova-webpack）模板项目和Onsen UI框架。

我有一个我父母打电话的子组件，如下所示：

<template>
   <!-- ... -->
   <child :value1="value1" 
          :value2="value2">
   </child>
   <!-- ... -->
</template>

我在子组件中的

：

<template>
   <!-- ... -->
   <v-ons-search-input v-model="mutableValue1"> </v-ons-search-input>

   <v-ons-checkbox v-model="mutableValue2"> </v-ons-checkbox>
   <!-- ... -->
</template>

export default {
    props: ['value1', 'value2'],

    name: 'child',
    data() {
      return {
        mutableValue1: this.value1,
        mutableValue2: this.value2,
      };
    }
};

现在，正如您所看到的，当用户更改mutableValue1和mutableValue2组件的值时，<v-ons-search-input>和<v-ons-checkbox>变量会更新。

（我介绍了那些mutableValue1和mutableValue2变量以避免[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders...警告）

我在父视图中需要这些值。目前，在父视图中访问this.value1和this.value2时，我没有更新这些值。

我该怎么做？

由于

Answer 1

这里有几个选项。首先，您可以使用参考：

访问所有子道具

tkinter.Listbox

第二个选项是在发生更改时从子组件发出事件。然后在父组件中监听它：

class MyListbox (Listbox):
    # ...
    def populate(self):
        """
        """
        def _convert65536(to_convert):
            """Converts a string with out-of-range characters in it into a
            string with codes in it.

            Based on <https://stackoverflow.com/a/28076205/4865723>.
            This is a workaround because Tkinter (Tcl) doesn't allow unicode
            characters outside of a specific range. This could be emoticons
            for example.
            """
            for character in to_convert[:]:
                if ord(character) > 65535:
                   convert_with = '{' + str(ord(character)) + 'ū}'
                   to_convert = to_convert.replace(character, convert_with)
            return to_convert

        # delete all listbox items
        self.delete(0, END)

        # add items to listbox
        for item in mydata_list:
            try:
                self.insert(END, item)
            except TclError as err:
                _log.warning('{} It will be converted.'.format(err))
                self.insert(END, _convert65536(item))

Here是第二个选项的示例。

VueJS - 从父级访问更新的子组件数据

1 个答案: