计算属性、插槽slot、内容分发

2022-07-07 09:31:27 阅读：174 来源： 互联网

标签：slot index Vue 分发插槽 component template 组件

1.计算属性

计算属性是基于他们的依赖进行缓存的（methods里的方法调用要加（））
方法不存在缓存（computed里的属性调用）

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    methods里的方法调用要加（）-->
    <div>{{time1()}}</div>
<!--    computed里的属性调用-->
    <div>{{time2}}</div>
</div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    var mv=new Vue({
        el:"#app",
        methods:
            {
                time1:function () {
                  return Date.now();
                }
            },
        computed:{
                  time2:function () {
                          return Date.now();
                  }
        }
    })

</script>
</html>
测试结果：

2.插槽slot

如何在组件component中插入其他组件--使用插槽slot

实现步骤：

（1）写总组件，模板里写入<slot></slot>，插槽要记得起名字name

(2) 写分组件，模板写你要插入的东西

（3）写总组件标签，里面写分组件标签，分组件标签要写对应的插槽slot=“插槽名字name”

（4）传值等操作参考正常的传递参数

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ig>
        <theshy slot="theshy1" :igtheshy="igtop"></theshy>
        <rookie slot="rookie1" v-for="igmid in igmids" :igrookie="igmid"></rookie>
    </ig>
</div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    Vue.component("ig",{
        template:`
        <div>
            <slot name="theshy1"></slot>
            <ul>
                <slot name="rookie1"></slot>
            </ul>
        </div>`
    });
    Vue.component("theshy",{
        props:['igtheshy'],
        template:`<div>{{igtheshy}}</div>`
    });
    Vue.component("rookie",{
        props:['igrookie'],
        template:`<li>{{igrookie}}</li>`
    });
    var mv=new Vue({
        el:"#app",
        data:{
            igtop:"the-shy",
            igmids:["rookie","肉鸡","小ig"]
        }
    });
</script>
</html>
测试结果：

3.内容分发

自定义事件使用$emit(事件名称，参数)

在分组标签里

 是@delete1不是：delete，类比@click，@自定义事件=“vue中的事件”
测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ig>
        <theshy slot="theshy1" :igtheshy="igtop"></theshy>
<!--        是@delete1不是：delete，类比@click，@自定义事件=“vue中的事件”-->
        <rookie slot="rookie1" v-for="(igmid,index) in igmids" :igrookie="igmid" :index="index" @delete="deleteigmids"></rookie>
    </ig>
</div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    Vue.component("ig",{
        template:`
        <div>
            <slot name="theshy1"></slot>
            <ul>
                <slot name="rookie1"></slot>
            </ul>
        </div>`
    });
    Vue.component("theshy",{
        props:['igtheshy'],
        template:`<div>{{igtheshy}}</div>`
    });
    Vue.component("rookie",{
        props:['igrookie','index'],
        template:`<li>{{igrookie}}------{{index}} <button @click="delete1(index)">删除</button></li>`,
        methods:{
            delete1:function (index) {
                alert(index);
               this.$emit('delete',index);

            }
        }

    });
    var mv=new Vue({
        el:"#app",
        data:{
            igtop:"the-shy",
            igmids:["rookie","肉鸡","小ig"]
        },
        methods:{
            deleteigmids:function (index) {
               this.igmids.splice(index,1);
                alert(index);

            }
        }
    });
</script>
</html>
测试结果：

标签：slot,index,Vue,分发,插槽,component,template,组件
来源： https://www.cnblogs.com/zcz666/p/16437537.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

计算属性、插槽slot、内容分发