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"/>

你想通过道具将它发送给你的孩子组件，所以你这样做了

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

这几乎是好的，但还不够，因为模板中的道具应该在烤肉盒中格式化，所以这是正确的设置

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

然后你应该将prop定义到组件逻辑中，这样Vue就可以知道要使用什么（你现在不需要数据模型，除了你有一些其他基于组件的数据）：

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

将子模型中的v模型链接到父值vue js

1 个答案: