Question

我有一个父组件和一个子组件。

父组件的模板使用一个槽，以便父组件中可以包含一个或多个子组件。

子组件包含一个称为“信号”的道具。

我希望能够在父组件中更改名为“parentVal”的数据，以便使用父级的值更新子级的信号道具。

这似乎应该是简单的东西，但我无法弄清楚如何使用插槽来做到这一点：以下是一个运行示例：

const MyParent = Vue.component('my-parent', {
  template: `<div>
               <h3>Parent's Children:</h3>
               <slot :signal="parentVal"></slot>
             </div>`,

  data: function() {
    return {
      parentVal: 'value of parent'
    }
  }
});

const MyChild = Vue.component('my-child', {
  template: '<h3>Showing child {{signal}}</h3>',
  props: ['signal']
});

new Vue({
  el: '#app',
  components: {
    MyParent,
    MyChild
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-parent>
    <my-child></my-child>
    <my-child></my-child>
  </my-parent>
</div>

Answer 1

您需要使用scoped slot。你几乎就在那里，我刚刚添加了创建范围的模板。

  <my-parent>
    <template slot-scope="{signal}">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>

这是您的代码更新。

＆＃13;

const MyParent = Vue.component('my-parent', {
  template: `<div>
               <h3>Parent's Children:</h3>
               <slot :signal="parentVal"></slot>
             </div>`,

  data: function() {
    return {
      parentVal: 'value of parent'
    }
  }
});


const MyChild = Vue.component('my-child', {
  template: '<h3>Showing child {{signal}}</h3>',
  props: ['signal']
});

new Vue({
  el: '#app',
  components: {
    MyParent,
    MyChild
  }
})

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-parent>
    <template slot-scope="{signal}">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>
</div>

＆＃13;

release of Vue 2.6引入了统一的v-slot指令，可用于普通或范围的插槽。在这种情况下，由于您使用的是默认的未命名广告位，因此可以通过signal访问v-slot="{ signal }"媒体资源：

  <my-parent>
    <template v-slot="{ signal }">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>

如何使用父级到子级的插槽传递道具-vuejs

1 个答案: