vue -- slot插件

最新推荐文章于 2023-06-22 21:26:04 发布

Lion Of WU

最新推荐文章于 2023-06-22 21:26:04 发布

阅读量333

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/NDSoumig/article/details/106082634

版权

vue.js 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

slot插件

把父组件的代码放到子组件中进行显示
就用slot插件
在这里插入图片描述

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="box">
        <child>
            <button @click='handleClikc'>click</button>
        </child>
        {{myname}}
    </div>
   
    <script type="text/javascript">
        
        Vue.component("child",{
            template:`
                <div>
                    <slot></slot>
                </div>
            `
           
        })

        let vue = new Vue({
            el:'#box',
           data:{
               myname:'hello'
           },
           methods:{
                handleClikc(){
                    this.myname = 'liang'
                }
           }

        })
    </script>
</body>
</html>

在上面代码中,child是子组件，数据和函数在根组件中，如果需要修改本应该对子组件进行传值，但是用slot就直接将button的父标签通过插件的方式放进子组件就可以修改值，而且可以共享子组件内容。

具名插槽

就是给每个插槽进行命名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="box">
        <child>
            <div slot="a">a插槽</div>
            <div slot="b">b插槽</div>
        </child>
        
    </div>
   
    <script type="text/javascript">
        
        Vue.component("child",{
            template:`
                <div>
                    <slot name='a'></slot>
                    chilck
                    <slot name='b'></slot>
                </div>
            `
           
        })

        let vue = new Vue({
            el:'#box'
        })
    </script>
</body>
</html>