Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>作用域插槽</title>
</head>
​
<body>
<style>
#app{
    border: 1px solid;
    padding:10px;
    text-align: center;
}
</style>
​
<div id="app">
    <my-component><!--2、在template模板中定义slot-scope，等号接一个临时的变量名 prop-->
        <template slot="abc" slot-scope="prop">
            {{ prop.text}}<!--3、在template 模板中 以文本插值形式 获取子组件数据-->
        </template>   
<!--其中 2.5.0版本之前 只能在 template 标签上用 slot, slot-scope ，而且template标签永远不会渲染，渲染是它里面的内容！-->
​
    <!--2.5.0版本后,可以在别的标答上用 slot,slot-scope ,而且在什么标签上用，什么标签及标签内容都会渲染出来-->
    <p slot="abc" slot-scope="prop">
        {{prop.text}}
    </p>
​
    </my-component>
</div>
​
<script>
var app = new Vue({
    el: '#app',
    components:{
        'my-component':{
            template:'<div>\
            <slot text="我是来自子组件" name="abc">\
            </slot>\
            </div>'//1、在子组件定义一个slot，写上要传递的数据
        }
    }
})
</script>    
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lovexwupro
0viewers