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

vue.js Vue.js

猪猪

2020-03-30

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

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

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

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

第3861篇《如何使用父级到子级-vuejs的插槽传递道具》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android