Vue作用域插槽组件和插槽之间的双向数据绑定

Question

我有个有作用域的槽。我需要传递给插槽的内容才能影响父模板。

到目前为止，这就是我所拥有的：

Parent.vue

<template>
  <div>
    <slot :text="text" :msg="msg"/>
    <p>{{text}}</p>
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: "Parent",
  data() {
    return {
      text: "",
      msg: ""
    };
  }
};
</script>

App.vue

<template>
  <parent>
    <template #default="{ text, msg }">
      <input type="text" v-model="text"/>
      <input type="text" v-model="msg"/>
    </template>
  </parent>
</template>

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

export default {
  name: "App",
  components: {
    Toolbar
  },
}

这不管用。我怎样才能做这种事呢？

Answer 1

这是不可能的您不能更改提供给组件(App.vue)的道具(在本例中是插槽道具)，但是您可以使用“处理程序”方法这样做。

Parent.vue

<template>
  <div>
    <slot :text="text" :msg="msg" :setValue="setValue" />
    <p>{{ text }}</p>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'Parent',
  data() {
    return {
      text: '',
      msg: ''
    };
  },
  methods: {
    // set the current value with a function
    setValue(e) {
      this[e.target.name] = e.target.value;
    }
  }
};
</script>

App.vue

<template>
  <parent>
    <template #default="{ text, msg, setValue }">
      Text: {{ text }}<br />
      Msg: {{ msg }}<br /><br />
      <!-- I have named the input fields after the variables in your data object and have the "setValue" method triggered by @input. -->
      <input type="text" name="text" @input="setValue" />
      <input type="text" name="msg" @input="setValue" />
    </template>
  </parent>
</template>

<script>
import Parent from './components/Parent';

export default {
  name: 'App',
  components: {
    Parent
  }
};
</script>