在作用域插槽内使用 v-model

Question

我正在使用 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>

代码笔

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

Answer 1

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

您应该传递一个方法来更改该值。如果您同意这一点，请遵循此答案。

然而，有一种巧妙的方法可以利用 Javascript 参考值来做到这一点

您可以传递一个保持其反应性的反应性对象（例如 Observer、reactiveGetter、reactiveSetter），而不是传递原始值（不会具有反应性）。

子组件

<template>
  <div class="child">
    <slot :model="model"></slot>
  </div>
</template>

<script>
export default {
  data: () => ({
    model: {
      value: "Initial value",
    },
  }),
};
</script>

父组件

<template>
  <div id="app">
    <Child v-slot="{ model }">
      <input type="text" v-model="model.value" />
    </Child>
  </div>
</template>

<script>
import Child from "./components/Child";

export default {
  components: {
    Child,
  },
};
</script>

在codesandbox 上查看实时内容。

Answer 2

好吧，看来不能直接改变数据。方法是作为 slot prop 方法传递，基本上重做 v-model：

<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'
});

Codepen 演示