Vue - 内置组件 -slot 父组件向子组件传值 - 好文

slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。

先来定义一个<jspang></jspang>的组件，这个组件用来显示博主的一些信息。

我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）

1234567data:{    jspangData:{        bolgUrl:'http://jspang.com',
netName:'技术胖',        skill:'Web前端'    }},
我们用<template></template>标签的方式定义了组件：

12345678<template id="tmp">    <div>        <p>博客地址：</p>        <p>网名：</p>
        <p>技术类型：</p>            </div></template>
我们现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。

slot的使用需要两步：

1、在HTML的组件中用slot属性传递值。

12345<jspang>    <span slot="bolgUrl">{{jspangData.bolgUrl}}</span>
<spanslot="netName">{{jspangData.netName}}</span>        <span slot="skill">
{{jspangData.skill}}</span>    </jspang>

2、在组件模板中用<slot></slot>标签接收值。

12345678<template id="tmp">    <div>        <p>博客地址：<slot name="bolgUrl">
</slot></p>        <p>网名：<slot name="netName"></slot></p>        <p>技术类型：<slot
name="skill"></slot></p>            </div></template>
我们贴出这个案例的全部代码：

1234567891011121314151617181920212223242526272829303132333435363738394041424344
4546474849<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">
<scripttype="text/javascript" src="../assets/js/vue.js"></script>    <title>
Slot content extend Demo</title></head><body>    <h1>Slot content extend Demo
</h1>    <hr>    <div id="app">    <jspang>        <span slot="bolgUrl">
{{jspangData.bolgUrl}}</span>            <span slot="netName">
{{jspangData.netName}}</span>            <span slot="skill">{{jspangData.skill}}
</span>        </jspang>    </div>  <template id="tmp">    <div>        <p>博客地址：
<slotname="bolgUrl"></slot></p>        <p>网名：<slot name="netName"></slot></p>
        <p>技术类型：<slot name="skill"></slot></p>            </div></template>
<scripttype="text/javascript">        var jspang={            template:'#tmp'
        }         var app=new Vue({            el:'#app',            data:{
              jspangData:{                   bolgUrl:'http://jspang.com',
                  netName:'技术胖',                   skill:'Web前端'               }
            },            components:{                "jspang":jspang
            }        })    </script></body></html>

热门工具换一换