Vue.js 在作用域插槽内使用v型

我正在使用Vue 2.6.9和新的v-slot语法。我想访问插槽内的v-model交互。问题在于，在插槽中显示数据是可行的，但使用v-model则不行。这是我的密码：

Vue.component('base-test', {
  template: `
  <div>
    <slot :foo="foo" :foo2="foo2"></slot>
  </div>
  `,
  data(){
    return{
      foo: 'Bar',
      foo2: 'Bar 2'
    }
  }
});


// Mount
new Vue({
  el: '#app'
});

<div id="app">
  <base-test v-slot="sp">
    <div>foo2 is {{ sp.foo2 }}</div>
    <input type="text" v-model="sp.foo">
    <div>foo is {{ sp.foo }}</div>
  </base-test>
</div>

Vue.component（'base-test'{
模板：`
`,
数据（）{
返回{
福：“酒吧”，
foo2:“酒吧2”
}
}
});
//坐骑
新Vue({
el:“#应用程序”
});
foo2是{{sp.foo2}
foo是{{sp.foo}}

---

我的问题是如何从插槽中与组件数据进行交互

好的，似乎无法直接更改数据。这样做的方法是通过槽道具方法，基本上重做v型：

<div id="app">
  <base-test v-slot="sp">
    <div>foo2 is {{ sp.foo2 }}</div>
    <input type="text" 
          :value="sp.foo2" @input="event => sp.onInput(event, 'foo2')">
    <div>foo is {{ sp.foo }}</div>
  </base-test>
</div>

Vue.component('base-test', {
  template: `
  <div>
    <slot :foo="foo" :foo2="foo2" :onInput="onInput"></slot>
  </div>
  `,
  data(){
    return{
      foo: 'Bar',
      foo2: 'Bar 2'
    }
  },
  methods:{
    onInput(event, prop){
      this[prop] = event.target.value;
    }
  }
});


// Mount
new Vue({
  el: '#app'
});

foo2是{{sp.foo2}
foo是{{sp.foo}}
Vue.组件（“基本测试”{
模板：`
`,
数据（）{
返回{
福：“酒吧”，
foo2:“酒吧2”
}
},
方法：{
onInput（事件、道具）{
此[prop]=event.target.value；
}
}
});
//坐骑
新Vue({
el:“#应用程序”
});

关于这个问题，Vue核心成员说，您不应该修改传递到插槽的数据。

您应该传递一个方法来更改该值。如果你同意这一点，那么按照答案去做

---

然而，通过利用Javascript参考值，有一种棘手的方法可以做到这一点

不是传递一个原语值（它不会有反应性），而是传递一个保持其反应性的反应性对象（例如Observer、reactiveGetter、reactiveSetter）

子组件

导出默认值{
数据：（）=>({
型号：{
值：“初始值”，
},
}),
};

父组件

从“/components/Child”导入子项；
导出默认值{
组成部分：{
小孩
},
};

---

.

foo1

数据中不存在我的坏，foo仍然不工作…这里有类似的问题和答案