代码之家 › 专栏 › 技术社区 › Jonathan Land

在Vue中,是否可以为组件中的插槽定义属性,以便插槽组件可以访问它们?[复制]

vue-component vue.js javascript

0

Jonathan Land · 技术社区 · 6 年前

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

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

子组件包含名为“signal”的属性。

我希望能够更改父组件中名为“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>

0 回复 | 直到 6 年前

1

28

thanksd thibaut noah 6 年前

你需要使用 scoped slot . 你就快到了,我刚刚添加了创建作用域的模板。

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

这是你的代码更新。

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>
    <template slot-scope="{signal}">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>
</div>

这个 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>