将子元素中的v-model链接到父值vue js

Question

我有一个vue组件，如下所示，在子模板中，我有一个文本输入，我希望使用v-model将其链接到父模板中的var。但它不起作用。我怎样才能做到这一点呢？

我目前使用的是Vue.js 1.23 (出于某些原因需要使用它，所以升级不是一个选项)

谢谢

// this is in my Vue app
textWidget: ''

// this is called directly in the page.html
<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :textWidget="textWidget"></text-widget>

// declaring the component just before my main vue app
Vue.component('text-widget', {
    template: `{% include('templates/widgets/text.html.twig') %}`,
    date: function () {
        return {
            textWidget:textWidget
        }
    }
})

更新：

// declared just before my Vue app
Vue.component('text-widget', {
    template: `{% include('templates/widgets/text.html.twig') %}`,
    props: ['textwidgetmodel']
})

// text input in the component child
<input type="text" v-model="textwidgetmodel">

// html in the main html page
// this input was just for testing. This confirmed that the props binding did indeed work, 
// the only problem is it seems to be a one way binding from parent to child. 
// I assume this because when I change the value with the text input below then it changes the value even in the component element. 
// But when a value in inputted into the child text input nothing happens to the value in the partent
<input type="text" v-model="textWidget" />

<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :textwidgetmodel=textWidget></text-widget>

Answer 1

好的，我猜在某个地方的输入元素已经将模型绑定到了textWidget，类似于：

<input type="text" v-model="textWidget"/>

您希望通过props将其发送给子组件，所以您这样做了

<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :textWidget="textWidget"></text-widget>

这几乎是好的，但还不够，因为模板中的props应该以kebab-case的形式进行格式化，所以这是正确的设置

<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :text-widget="textWidget"></text-widget>

然后，您应该在组件逻辑中定义该属性，以便Vue可以知道要使用什么(您现在不需要数据模型，除非您有其他一些基于组件的数据)：

// declaring the component just before my main vue app
Vue.component('text-widget', {
    template: `{% include('templates/widgets/text.html.twig') %}`,
    props: ['textWidget']
})