澳门新萄京Vue中的slot使用插槽分发内容的措施,
分类:澳门新萄京最大平台

vue作者自个儿还在索求学习中,明天求学了运用 Slot 分发内容,给本人留个小笔记

正文主题素材来自:

一、什么是slot

前方的话

使用一种办法混合父组件的情节与子组件自个儿的模版,这些历程被称为“内容分发”。在子组件中采取异乎常常的<slot>成分作为内容的插槽。

采纳slot分发内容大家要留心二点

<slot></slot>标签,不难的话就是占位符,它会帮你占好地点,等您需求的时候一向将html传入,它会帮你体现出来。

在应用组件时,大家常常要像那样组合它们:

为了让组件能够整合,需求壹种情势来混合父组件的内容与子组件自身的模板。这几个进度被誉为 内容分发 (或 “transclusion” )。Vue达成了3个内容分发 API,参照了当下 Web 组件标准草案,使用特别的 <slot> 成分作为原有内容的插槽。本文将详细介绍Vue内容分发slot

Slot分发内容

<app> 组件不知晓它会吸收接Nash么内容。那是由使用 <app> 的父组件决定的。

也可能有些人说:props能够将数据从父组件传入子组件,slot能够将html从父组件传入子组件。那么哪些落到实处吗?

<app>
 <app-header></app-header>
 <app-footer></app-footer>
</app>

编译效能域

概述:

<app> 组件很大概有它自身的模版。

单个插槽:

当须要让组件组合使用,混合父组件的剧情与子组件的沙盘时,就能够用到slot , 那几个历程叫作内容分发( transclusion )。

在深刻内容分发 API 在此以前,先明确内容在哪些作用域里编写翻译。假定模板为

简单易行来讲,要是父组件须求在子组件内放一些DOM,那么这几个DOM是呈现、不展现、在哪个地点显得、怎么着体现,正是slot分发担负的活。

为了让组件能够整合,大家须求一种办法来混合父组件的剧情与子组件自身的沙盘。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>我是父组件的标题</h1>
      <my-component>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
      </my-component>
    </div>
    <script type="text/javascript">
      Vue.component('my-component', {
       // 有效,因为是在正确的作用域内
       template: '<div>
              <h2>我是子组件的标题</h2>
              <slot>只有在没有要分发的内容时才会显示。</slot>
            </div>',
       data: function () {
        return {

        }
       }
      });
      new Vue({
        el:'#app',
        data:{
          msg:'你好啊'
        }
      })

    </script>
  </body>
</html>

注意两点:

<child-component>
 {{ message }}
</child-component>

暗中认可意况下

【案例】

零件中的模板中写入slot标签,在父级调用子组件的时候传出html就能够。

一.< app>组件不清楚它的挂载点会有哪些内容。挂载点的故事情节是由<app >的父组件决定的。

message 应该绑定到父组件的数目,照旧绑定到子组件的数目?答案是父组件。组件效率域轻易地便是:父组件模板的始末在父组件功效域内编译;子组件模板的内容在子组件功用域内编写翻译。

父组件在子组件内套的内容,是不显得的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-Slot 分发内容</title>
  <script type="text/javascript" src="js/vue.js"></script>
  <style>
    .sf{
      margin: 10px;
      width: 150px;
      border: 1px solid #ccc;
    }
    .sf-header,.sf-bottom{
      height: 30px;
      background: sandybrown;
    }
    .sf-body{
      min-height: 100px;
    }

  </style>
</head>
<body>
  <div id="app">
    <shoufa>
      <h2 slot="title">学习vue</h2>
      <p>Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。
        与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
        Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合</p>
      <h4 slot="bottom">vue很好学</h4>
    </shoufa>
  </div>
  <script type="text/x-template" id="sfTpl">
    <div class="sf">
      <div class="sf-header"><slot name="title"></slot></div>
      <div class="sf-body">
        <slot></slot>
      </div>
      <div class="sf-bottom"><slot name="bottom"></slot>
      </div>
    </div>
  </script>

  <script>
    var sf ={
      template:"#sfTpl",
    }
    var app = new Vue({
      el:"#app",
      components:{
        'shoufa':sf
      }
    })
  </script>
</body>
</html>

具名插槽:

二.<app> 组件很恐怕有它协和的模版。

二个科学普及错误是准备在父组件模板内将1个发令绑定到子组件的属性/方法:

例如代码:

结果如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <my-component>
         <h1 slot="header">这里可能是一个页面标题</h1>

         <p>主要内容的一个段落。</p>
         <p>另一个主要段落。</p>

         <p slot="footer">这里有一些联系信息</p>
      </my-component>
    </div>
    <script type="text/javascript">
      Vue.component('my-component', {
       // 有效,因为是在正确的作用域内
       template: '<div class="container">
             <header>
              <slot name="header"></slot>
             </header>
              <main>
              <slot></slot>
             </main>
             <footer>
              <slot name="footer"></slot>
             </footer>
            </div>',
       data: function () {
        return {

        }
       }
      });
      new Vue({
        el:'#app',
        data:{
          msg:'你好啊'
        }
      })

    </script>
  </body>
</html>

props 传递数据、events 触发事件和slot 内容分发就构成了Vue 组件的3 个API 来源,再繁杂的零部件也是由这三 部分构成的。

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>
<div id="app"> 
  <children> 
    12345 
    <!--上面这行不会显示--> 
  </children> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    components: { 
      children: {  //这个无返回值,不会继续派发 
        template: "<button>为了明确作用范围,所以使用button标签</button>" 
      } 
    } 
  }); 
</script> 

澳门新萄京 1

具名插槽,断章取义当有两个slot标签时,你供给给他们起个温馨的名字,在父组件调用时索要slot="内部的附和名字",当存在未有命名的slot标签时,父级组件传入的私下认可html代码将全体出口在默默的slot标签中。

 二、作用域

假如someChildProperty是子组件的习性,上例不会如预期职业。父组件模板不该知道子组件的图景

展现内容是多少个button按键,不含有span标签里面包车型大巴原委;

如上正是本文的全体内容,希望对我们的学习抱有援助,也希望大家多多帮忙脚本之家。

成效域插槽

<child-component>
 {{ message }}
</child-component>

若是要绑定效率域内的吩咐到一个零件的根节点,应当在组件本身的沙盘上做:

一、单个slot

你或然感兴趣的小说:

  • Vue组件中slot的用法
  • 深远驾驭vue中slot与slot-scope的求实运用
  • 详解vue.js数据传递以及数据分发slot
  • Vue二.0 slot分发内容与props验证的章程
  • Vue内容分发slot(周详分析)
  • vue Render中slots的选拔的实例代码
  • 详解Vue学习笔记入门篇之组件的从头到尾的经过分发(slot)
  • Vue.js中组件中的slot实例详解
  • 详解vue slot插槽的采纳办法
  • Vue.js之slot深度复制详解
  • Vue中的slot使用插槽分发内容的形式
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
       <!-- 在父级中,具有特殊特性 slot-scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象: -->
       <child>
        <template scope="props">
         hello from parent<br>
         {{ props.text }}
        </template>
      </child>
    </div>
    <script type="text/javascript">
      // 在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:
      Vue.component('child',{
        template:'<ul>'  
              '<slot text="hello from child"></slot>'  
             '</ul>',
        data:function(){
         return {

         }
        },
      });
      new Vue({
        el:'#app',
        data:{
          msg:'你好啊'
        }
      })

    </script>
  </body>
</html>

那边的message 便是多个slot ,但是它绑定的是父组件的数目,而不是组件<child-component>的数码。

Vue.component('child-component', {
 // 有效,因为是在正确的作用域内
 template: '<div v-show="someChildProperty">Child</div>',
 data: function () {
 return {
  someChildProperty: true
 }
 }
})

在子组件模板中有slot标签,被视为备用内容,在父组件不提供内容的情景下行使。倘使父组件提供内容,则把整体内容片段插入到slot所在的DOM地点,并替换掉slot标签本身。

成效域插槽是一种极度类其他插槽,用作三个 (能被传递数据的) 可采用模板,来顶替已经渲染好的成分。

父组件模板的源委是在父组件功用域内编写翻译,子组件模板的内容是在子组件功用域内编写翻译。如:

好像地,分发内容是在父效率域内编写翻译

子组件模板中没有slot标签,父组件提供的剧情会被舍弃

实在就是一定于,在父组件中得以博得到子组件传递出去的props对象,从而渲染到父组件上。

   <div id="app15">
      <child-component v-show="showChild"></child-component>
    </div>
Vue.component('child-component',{
  template: '<div>子组件</div>'
});
var app15 = new Vue({
  el: '#app15',
  data: {
    showChild: true
  }
});

暗许舍弃

借使替换的剧情较多,能够一直用二个template替换。

上述就是本文的全体内容,希望对我们的求学抱有帮衬,也冀望我们多多帮助脚本之家。

此间的情形showChild 绑定的是父组件的数据,假诺想在子组件上绑定,那应该是:

貌似地,要是子组件模板不含有<slot>插口,父组件的剧情将会被吐弃

<div id="app">
  <h2>自定义组件</h2>
  <custom>
   <!-- 当卸载自定义标签之前的内容,要混合子组件中的模板 -->
   <div>我是父组件提供的内容,我的存在会替换子组件中slot标签内的内容</div> 
  </custom>
</div>
<script type="text/javascript" src='http://www.xb-cj.com/uploads/allimg/190608/0406301K4-1.jpg'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot>
     <div>我备用内容,如果子组件中有内容会替换我哦~</div>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

您或然感兴趣的篇章:

  • Vue组件中slot的用法
  • 深切掌握vue中slot与slot-scope的求实行使
  • 详解vue.js数据传递以及数据分发slot
  • Vue贰.0 slot分发内容与props验证的格局
  • vue怎么着使用 Slot 分发内容实例详解
  • Vue内容分发slot(周详分析)
  • vue Render中slots的接纳的实例代码
  • 详解Vue学习笔记入门篇之组件的从头到尾的经过分发(slot)
  • Vue.js中组件中的slot实例详解
  • 详解vue slot插槽的选拔办法
  • Vue.js之slot深度复制详解
    <div id="app15">
      <child-component></child-component>
    </div>
Vue.component('child-component',{
  template: '<div v-show="showChild">子组件</div>',
  data: function(){
    return {
      showChild: true
    }
  }
});
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p>测试内容</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};


<div id="example">
 <parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p>测试内容</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

知相恋的人神迹的时候到了,页面上会显示如下内容

为此, slot 分发的原委,功能域是在父组件上的。

正如图所示,<child>所包括的<p>测试内容</p>被甩掉

澳门新萄京 2 

三、slot用法

澳门新萄京 3

单个slot.png

3.1 单个slot

匿名slot

二、有切实可行名称的slot

在子组件内使用特别的<slot>元素就足感到那一个子组件开启三个slot(插槽),在父组件模板里,插入在子组件标签内的持有剧情将替代子组件的<slot> 标签及它的从头到尾的经过。   

当子组件模板唯有贰个并未有质量的 slot 时,父组件全副内容片段将插入到 slot 所在的 DOM 地方,并替换掉 slot 标签本人

<slot>成分得以用三个新鲜的属性name来配置怎样分发内容。

 <div id="app16">
      <my-component16>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
      </my-component16>
    </div>
Vue.component('my-component16',{
  template: '<div>'  
        '<slot><p>如果父组件没有插入内容,我将作为默认出现<</p></slot>'      //预留的slot插槽
       '</div>'
});
var app16 = new Vue({
  el: '#app16'
});
var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot></slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p>测试内容</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};
<div id="app">
  <h2>自定义组件</h2>
  <custom>
   <!-- <div slot="one">我替换one</div> -->
   <div slot="three">我替换three</div>
   <div slot="two">我替换two</div>
   我替换two
   <div slot="one">我替换one</div>
  </custom>
</div>
<script type="text/javascript" src='http://www.xb-cj.com/uploads/allimg/190608/0406301K4-1.jpg'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot name="one"> 
     <p>我是one</p>
    </slot>
    <slot name="two">
     <p>我是two</p>
    </slot>
    <slot name="three">
     <p>我是three</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

渲染结果为:

澳门新萄京 4

您猜页面上会突显怎么?猜对了自身就告诉您-。-

<div id=”app16”>
  <div>
    <p>分发的内容<p>
    <p>更多分发的内容<p>
  </div>
</div>

若果出现多于3个的无名氏slot,vue将报错

澳门新萄京 5 

 子组件child-component的沙盘钦命义了2个<slot>成分,并且用二个<p>作为暗许的内容,在父组件没有利用slot 时,会渲染这段默许的文本;假设写入了slot, 那就能够交替整个<slot> 。

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot></slot>
 <slot></slot>
 </div>
 `,
};

具名slot.png

3.2具名slot

澳门新萄京 6

是否被依次惊到了,那是因为页面会遵照子组件中slot的依次去替换内容并渲染页面。

给<slot> 成分内定3个name 后方可分发多少个内容,具名Slot 能够与单个slot 共存。

【默认值】

能够使用一个佚名的slot,管理那个未有对应slot的剧情

  <div id="app17">
      <my-component17>
        <h3 slot="header">标题</h3>
        <p>正文内容</p>
        <p>更多正文内容</p>
        <h3 slot="footer">底部信息</h3>
      </my-component17>
    </div>
Vue.component('my-component17',{
  template: '<div class="container">'  
         '<div class="header">'  
          '<slot name="header"></slot>'  
         '</div>'  
         '<div class="main">'  
          '<slot></slot>'  
         '</div>' 
         '<div class="footer">'  
          '<slot name="footer"></slot>'  
         '</div>' 
       '</div>'
});
var app17 = new Vue({
  el: '#app17'
});

最初在 <slot> 标签中的任何内容都被视为备用内容,恐怕叫做默许值。备用内容在子组件的成效域内编写翻译,并且唯有在宿主成分为空,且尚未要插入的剧情时才展现备用内容

 <div id="app">
  <h2>自定义组件</h2>
  <custom>
   <!-- <div slot="one">我替换one</div> -->
   <div slot="three">我替换three</div>
   <div slot="two">我替换two</div>
   我替换two
   <div slot="one">我替换one</div>
   <div>替换无名的slot</div>
   <div>替换无名的slot</div>
   <div>替换无名的slot</div>
  </custom>
 </div>
<script type="text/javascript" src='http://www.xb-cj.com/uploads/allimg/190608/0406301K4-1.jpg'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot name="one"> 
     <p>我是one</p>
    </slot>
    <slot name="two">
     <p>我是two</p>
    </slot>
    <slot name="three">
     <p>我是three</p>
    </slot>
    <slot>
     <p>我是无名的slot</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

渲染结果为:         

当slot存在默许值,且父元素在<child>中尚无要插入的剧情时,呈现私下认可值

无名的slot就能够被那个从没对应slot的剧情替换。

 <div id="app17">
        <div class="container">
          <div class="header">
            <h3>标题</h3></div>
          <div class="main"> 
            <p>正文内容</p> 
            <p>更多正文内容</p> 
          </div>
          <div class="footer">
            <h3>底部信息</h3>
          </div>
        </div>
      </div>
var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot><p>我是默认值</p></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child></child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

澳门新萄京 7 

 子组件内注解了3 个<s lot>成分,在那之中在<div class=” main >内的<slot> 未有应用name 性格,它将作为暗许slot 出现,父组件未有利用slot 天性的因素与内容都将应际而生在这里。

澳门新萄京 8

匿名slot.png

若果未有一点名默许的佚名slot ,父组件内剩余的始末片段都将被遗弃。

当slot存在私下认可值,且父成分在<child>中设有要插入的内容时,则突显设置值

三、编写翻译效率域

肆、成效域插槽

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot><p>我是默认值</p></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p>我是设置值</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

父组件模板的内容在父组件作用域内编写翻译

成效域插槽是一种奇特的slot ,使用3个得以复用的沙盘替换己渲染成分。

澳门新萄京 9

子组件模板的剧情在子组件效能域内编写翻译

看3个事例:     

具名Slot

<div id="app">
  <h2>自定义组件</h2>
  <custom>
   <!-- 渲染的数据,是父组件中的数据,如果想使用子组件中的数据,就在子组件中建立自己的数据 -->
   {{message}}
  </custom>
</div>
<script type="text/javascript" src='http://www.xb-cj.com/uploads/allimg/190608/0406301K4-1.jpg'></script>
<script>
 Vue.component('custom',{
  data(){
   return {
    message:"我是子组件的数据"
   }
  },
  template:`
   <div>
    <p>我是{{message}}</p>
    <slot>
    // 这的内容会被父组件中内容替换
     <p> {{message}}</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app",
  data:{
   message:"我是父组件的数据"
  }
 })
</script>
 <div id="app18">
      <my-component18>
        <template scope="props">
          <p>来自父组件的内容</p>
          <p>{{props.msg}}</p>
        </template>
      </my-component18>
    </div>
Vue.component('my-component18',{
  template: '<div class="container"><slot msg="来自子组件的内容"></slot></div>'
});
var app18 = new Vue({
  el: '#app18'
});

<slot> 成分能够用一个非同小可的属性 name 来配置哪些分发内容。多个 slot 能够有区别的名字。具名 slot 将合作内容片段中有对应 slot 个性的因素

页面渲染

观察子组件的沙盘,在<slot>成分上有几个好像props 传递数据给组件的写法msg=” xxx ”,将数据传到了插槽。

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-header">头部默认值</slot>
 <slot name="my-body">主体默认值</slot>
 <slot name="my-footer">尾部默认值</slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p slot="my-header">我是头部</p>
  <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

澳门新萄京 10 

父组件中央银行使了<template>成分,而且富有一个scope=”props ”的特色,这里的props只是三个有的时候变量,就像v-for= ” item in items在这之中的item 一样,template 内能够由此不经常变量props访问来自子组件插槽的数目msg 。

澳门新萄京 11

编写翻译作用域.png

上面看下Vue组件中slot的用法

还是能够有一个无名 slot,它是默认 slot,作为找不到格外的开始和结果片段的备用插槽。无名slot只好同日而语未有slot属性的因素的插槽,有slot属性的要素即便未有布置slot,则会被撇下

选拔了slot分发,使大家对组件的施用更灵敏。

重中之重是让组件的可扩张性越来越强。

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 <slot></slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p slot="my-body">我是主体</p>
  <p>我是其他内容</p>
  <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

单向数据流

  1. 利用无名氏slot

<p slot="my-body">插入<slot name="my-body">中,<p>我是其余情节</p>插入<slot>中,而<p slot="my-footer">被撤除

数据从父组件传递给子组件,只好单项绑定。

澳门新萄京 12

澳门新萄京 13

在子组件内不该修改父组件传递过来的数目。

  1. 给slot加个名字

若果没有默许的 slot,这一个找不到相当的源委片段也将被撤废

改变prop的情况:

澳门新萄京 14

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p slot="my-body">我是主体</p>
  <p>我是其他内容</p>
  <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

一.用作data中一些数据的起初值使用

假若不在有slot的组件里参与其它标签,slot什么都不会突显的。

<p>作者是别的剧情</p>和<p slot="my-footer">都被放弃

二.看作子组件中computed属性

总结

澳门新萄京 15

props 验证

上述所述是笔者给大家介绍的vue组件详解之使用slot分发内容,希望对我们有所帮助,借使我们有别的疑问请给本人留言,小编会及时还原我们的。在此也极其多谢大家对剧本之家网址的辅助!

功能域插槽

大家在父组件给子组件传值得时候,为了幸免不须求的错误,能够给prop的值进行项目设定,让父组件给子组件传值得时候,尤其正确

您大概感兴趣的文章:

  • 详解Vue学习笔记入门篇之组件的源委分发(slot)
  • Vuejs第7壹篇组件之slot内容分发实例详解
  • vue 组件中slot插口的切实用法
  • vue slot 在子组件中体现父组件传递的模版
  • Vue组件中slot的用法
  • Vue.js中组件中的slot实例详解

功能域插槽是1种特有类型的插槽,用作使用3个 (能够传递数据到) 可选取模板替换已渲染成分。

  props:{
  propA:Number, 数值类型
  propB:[String,Number], 多种类型
  propC:{type:String,required:true}, 必填项
  propD:{type:Number,default:100}, 默认是
  propE:{typr:Number,default:function(){return 1000}}
  propF:{validator:function(value){return value>2}} 符合value>2的值
  }

在子组件中,只需将数据传递到插槽,就像将 props 传递给组件同样

不知底,看如下案例,须要父组件给子组件传值得时候

<div class="child">
 <slot text="hello from child"></slot>
</div>

一、那么些参数是必须传的

在父级中,具备特种品质 scope 的 <template> 成分必须存在,表示它是成效域插槽的模板。scope 的值对应2个有的时候变量名,此变量接收从子组件中传送的 props 对象

二、值必须是数值类型的

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
  <slot xxx="hello from child"></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <template scope="props">
  <p>hello from parent</p>
  <p>{{ props.xxx }}</p>
  </template>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

澳门新萄京Vue中的slot使用插槽分发内容的措施,vue怎样使用。三、暗许参数是10

假定渲染以上结果,得到的输出是

 Vue.component('custom-cmpontent',{
  data(){
   return {
    incrementCount:this.count //作为局部组件的data的初始值
   }
  },
  props:{
   count:{
    type:Number, // 类型
    default:10, // 默认值
    required:true //必须要传参数
   }
  },
  computed:{
   incrementCount2(){
    return this.incrementCount
   }
  },
  template:`
    <div>
     <h2>我是一个自定义组件</h2>
     <input type='button' value="改变count的值" @click="changeCount">
     {{incrementCount}}
    </div>
  `,
  methods:{
   changeCount:function(value){
    this.incrementCount  ;
    this.$emit('receive')
   }
  }
 })
 new Vue({
  el:"#app",
  data:{
   count:0
  },
  methods:{
   countH:function(){
    this.count  ;
   }
  }
 })

澳门新萄京 16

那若是大家给子组件传值得时候,传过去的是一个字符串,就能够报错

【列表组件】

上述就是本文的全体内容,希望对大家的求学抱有帮助,也盼望大家多多帮衬脚本之家。

效能域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每1项

您也许感兴趣的稿子:

  • Vue组件中slot的用法
  • 深深驾驭vue中slot与slot-scope的切实使用
  • 详解vue.js数据传递以及数额分发slot
  • vue如何使用 Slot 分发内容实例详解
  • Vue内容分发slot(周详深入分析)
  • vue Render中slots的施用的实例代码
  • 详解Vue学习笔记入门篇之组件的剧情分发(slot)
  • Vue.js中组件中的slot实例详解
  • 详解vue slot插槽的选拔形式
  • Vue.js之slot深度复制详解
  • Vue中的slot使用插槽分发内容的法子
var childNode = {
 template: `
 <ul>
 <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
 </ul>
 `,
 data(){
 return{
  items:[
  {id:1,text:'第1段'},
  {id:2,text:'第2段'},
  {id:3,text:'第3段'},
  ]
 }
 }
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <template slot="item" scope="props">
  <li>{{ props.text }}</li>
  </template>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

澳门新萄京 17

以上那篇Vue内容分发slot(全面深入分析)就是笔者分享给我们的全体内容了,希望能给大家三个参照他事他说加以考察,也希望我们多多协理脚本之家。

你大概感兴趣的文章:

  • Vue组件中slot的用法
  • 深切理解vue中slot与slot-scope的现实性应用
  • 详解vue.js数据传递以及数据分发slot
  • Vue二.0 slot分发内容与props验证的措施
  • vue怎么着使用 Slot 分发内容实例详解
  • vue Render中slots的施用的实例代码
  • 详解Vue学习笔记入门篇之组件的内容分发(slot)
  • Vue.js中组件中的slot实例详解
  • 详解vue slot插槽的选拔格局
  • Vue.js之slot深度复制详解
  • Vue中的slot使用插槽分发内容的法子

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京Vue中的slot使用插槽分发内容的措施,

上一篇:澳门新萄京:分析javascript原型及原型链,深透领 下一篇:没有了
猜你喜欢
热门排行
精彩图文