码迷,mamicode.com
首页 > 其他好文 > 详细

vue中插槽

时间:2020-02-22 12:16:41      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:style   head   title   一个   npm   默认   htm   vue   lan   

    当定义完一个组件后,可能在使用时还需要往这个组件中插入新的元素或者文本。这个时候就可以使用插槽来完成。
  1.  在定义`template`时,在需要插入的地方使用`<slot></slot>`标识出来。在使用时只需将传递的值放在定义的组件标签包裹起来即可。
  2. 插槽可以设置默认值。在定义template时,用`slot`标签包裹起来即可,当没有传递值时就使用默认值,但传值后,则使用新的值。
  3. 插槽当中的变量是从父组件的变量中读取的,而非从该组件中读取。也就是说:在插槽中使用`{{  }}` 定义的变量时,这个变量一定是在使用父组件的data中定义的。
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue中插槽</title>
</head>

<body>
    
    <div id="app">
        <nav-link url="https://www.baidu.com">百度</nav-link>
    </div>
    <script>
        Vue.component(nav-link, {
            props: [url],
            template: `
            <div>
                <nav><a :href="url"><slot>谷歌</slot></a></nav>
            </div>
        `
        })
        new Vue({
            el: "#app",
            data: {

            }
        })
    </script>
</body>

</html>

 

vue中插槽

标签:style   head   title   一个   npm   默认   htm   vue   lan   

原文地址:https://www.cnblogs.com/xshan/p/12344613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!