菜单

Vue组件中slot的用法

2019年6月1日 - Ajax

上面给我们介绍Vue组件中slot的用法

Vue组件中的slot

重大是让组件的可扩展性越来越强。

slot
能够兑未来曾经定义的机件中增添内容,组件会接收内容并出口,要是有一个零件person,它的里边含有的是个人音信,如上边那样

  1. 运用佚名slot
 <template id="per">
    <div>
      <p>姓名:...</p>
      <p>年龄:...</p>
      <p>职业:...</p>
    </div>
  </template>

图片 1

在接纳的时候,当然希望这里面能够是灵活变动的,所以那就需求用到slot了

  1. 给slot加个名字

率先要做的业务便是创设这样1个组件,这里本身动用的是<template>的样式,如上边那样

图片 2

<template id="per">
    <div>
      <p>姓名:</p>
      <p>年龄:</p>
      <p>职业:</p>
    </div>
  </template>

如若不在有slot的零部件里参加其它标签,slot什么都不会显示的。

能够看来本人那边给template增多了id,这一个是为了后边的操作

总结

上面选取Vue的构造器,创制Vue实例,然后增多局地的零部件,如下边那样

以上所述是小编给大家介绍的Vue组件中slot的用法,希望对我们有着协理,假若我们有其它疑问请给我留言,作者会及时回复我们的。在此也特别感激我们对台本之家网址的帮忙!

  var person = {
     template : "#per"  //利用id
    };
    new Vue({
      el: "#app",
      data: {
        componentData: {
          name : "vam",
          age : 18,
          job : "student"
        }
      },
      components : {
        "person" : person
      }
    });

你大概感兴趣的稿子:

接下去就是要在<person>
组件使用的时候增多点东西,便是具体内容,上面那样:

  <div id="app">
    <person>
      {{componentData.name}}
      {{componentData.age}}
      {{componentData.job}}
    </person>
  </div>

当然如此照旧非常不够的,总得在模板中有一点点什么吧,如下,这里就该用到slot了  

 <template id="per">
    <div>
      <p>姓名:<slot name="name"></slot></p>
      <p>年龄:<slot name="age"></slot></p>
      <p>职业:<slot name="job"></slot></p>
    </div>
  </template>

未来就足以见到想要的结果了

以上便是Vue.js中组件中的slot实例的教学,我们只要有疑问请留言研讨,共同升高,多谢阅读,希望能扶助到大家,谢谢大家对本站的支撑!

你可能感兴趣的文章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图