Question

我正在将Vue 2.6.9与新的v槽语法一起使用。我想访问与插槽内的v模型互动。问题是在插槽内显示数据有效，但是使用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>

Codepen

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

Answer 1

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

您应该传递一个方法来更改值。如果您同意这一点，请按照 this 回答。

但是，有一种利用 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>

See it live on codesandbox。

Answer 2

好吧，似乎无法直接更改数据。做到这一点的方法是通过slot prop方法并基本上重做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'
});

Codepen demo

在作用域内的插槽中使用v模型

2 个答案: