07-组件通信、slot插槽

最新推荐文章于 2021-07-31 11:19:02 发布
最新推荐文章于 2021-07-31 11:19:02 发布
阅读量127 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44143173/article/details/104568582
版权

一、组件通信

 

　　① 父 => 子

 　　-- 步骤

　　　　1）子组件中通过 props 键接受父组件传值

　　　　2）父组件通过 v-bind 向子组件传值

　　--例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="app">
            <parent></parent>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            Vue.component('parent',{
                data(){
                    return {
                        parentMsg : 'parent'
                    }
                },
                template:`
                <div>
                    <p>父组件</p>
                    <p>组件值 {{ parentMsg }}</p>
                    
                    //调用子组件，并传值
                    <son v-bind:sendMsg="parentMsg"></son>
                </div>
                `,
                // 子组件
                components:{
                    son:{
                        //接受父组件传递的值
                        props:['sendMsg'],
                        template:`
                        <div>
                            <p>子组件</p>
                            <p>接受父组件的值：{{ sendMsg }}</p>
                        </div>
                        `
                    }
                }
            })

            let vm = new Vue({
                el: '#app',
            })
        </script>
    </body>
</html>

效果图：

 

 

 

　　② 子 => 父

　　-- 步骤

　　　　1）子组件自定义事件，通过 $emit 触发

　　　　　　语法：this.$emit( ' 事件名称 '，数据1，... ，数据n )

　　　　2）父组件调用事件获取数据

　　-- 例子

　　

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <meta charset="UTF-8">
</head>

<body>
    <div id="app">
        <parent></parent>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('parent', {
            data(){
                return {
                    sendsonMsg:null
                }
            },
            template: `
                <div>
                    <p>父组件</p>
                    <p>子组件值 {{ sendsonMsg }}</p>

                    <!-- 2.调用子组件 -->
                    <son @sonSend = 'showSonMsg'></son>
                </div>
                `,
                methods: {
                    // 3.定义方法
                    showSonMsg(data){
                        this.sendsonMsg = data;
                    }
                },
            // 子组件
            components: {
                son: {
                    template: `
                        <div>
                            <p>子组件</p>
                            <p>子组件的值：{{ sonMsg }}</p>
                        </div>
                        `,
                    data() {
                        return {
                            sonMsg:'sonData'
                        }
                    },
                    // 1.$emit 触发
                    mounted() {
                        this.$emit('sonSend', this.sonMsg)
                    },
                }
            }
        })

        let vm = new Vue({
            el: '#app',
        })
    </script>
</body>

</html>

效果图

 

 

　　③ 兄弟组件通信 （event bus）

 　　 -- 步骤

　　　　1）定义数据共享中心

　　　　　　const eventBus = new Vue();

　　　　2）发送数据

　　　　　　eventBus .$emit( ' 事件名 '，数据1，... ，数据n )

　　　　3）接收数据

　　　　　　eventBus .$on(' 事件名 '，处理函数)

 　　-- 例子

　　

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="app">
            <mytag1></mytag1>
            <mytag2></mytag2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>

            Vue.component('mytag1',{
                data(){
                    return {
                        tagMsgOne:'tag1Data',
                        tagMsg:null
                    }
                },
                template:`
                <div>
                    <p>兄弟组件一</p>
                    <button @click='sendDataOne'>传递信息</button>
                    <p>兄弟组件一数据：{{ tagMsgOne }}</p>
                    <p>兄弟组件二传递的数据：{{ tagMsg }}</p>
                    <hr />
                </div>
                `,
                methods: {
                    sendDataOne(){
                        eventBus.$emit('event', this.tagMsgOne)
                    }
                },
                mounted(){
                    // 3.接收数据
                    eventBus.$on('tagTwo',(data) => {
                        this.tagMsg = data
                    })
                }
            })

            Vue.component('mytag2',{
                data(){
                    return {
                        tagMsgTwo:'tag2Data',
                        tagMsg:null
                    }
                },
                template:`
                <div>
                    <p>兄弟组件二</p>
                    <button @click='sendDataTwo'>传递信息</button>
                    <p>兄弟组件二数据：{{ tagMsgTwo }}</p>
                    <p>兄弟组件一传递数据：{{ tagMsg }}</p>
                </div>
                `,
                mounted() {
                    eventBus.$on('event',(data) => {
                        this.tagMsg = data;
                    })
                },
                methods:{
                    // 2.发送数据
                    sendDataTwo(){
                        eventBus.$emit('tagTwo',this.tagMsgTwo)
                    }
                }
            })

            // 1.创建共享数据中心
            const eventBus = new Vue();


            let vm = new Vue({
                el: '#app',
                data: {

                },
                methods: {

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

效果图

 

 

 

二、solt 插槽

 

　　为什么要用插槽：封装一个组件，每次调用显示不同的信息

　　① 后备内容

　　-- 步骤

　　　　1）定义组件时内容去用 <slot></slot> 占位

　　　　2）调用组件时，组件标签内容后同步到插槽占位符中

 

　　--例子

 　　

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="app">
            <mytag>提示信息</mytag>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            // 定义组件
            Vue.component('mytag',{
                template:`
                
                <div style='border:1px solid red;max-width:200px'>
                    <!-- 占位符 -->
                    <slot></slot>
                </div>
                
                `
            })

            let vm = new Vue({
                el: '#app',
            })
        </script>
    </body>
</html>

效果图

 

 

　　② 具名插槽

　　--步骤

　　　　1）定义组件时，用 slot 占位

　　　　　　<slot name=' 标识 '></slot>

　　　　2）调用组件时，根据标识显示数据

　　　　　　<template v-slot:标识>

　　　　　　　　//html 标签

　　　　　　</template>

　　--例子

　　

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="app">
            <mytag>
                <template v-slot:test>
                    test
                </template>
            </mytag>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>

            // 定义显示数据

            // 定义组件
            Vue.component('mytag',{
                template:`
                <div style='border:1px solid red;max-width:200px'>
                    <!-- 占位符 -->
                    <slot name= 'test'></slot>
                </div>
                `
            })

            let vm = new Vue({
                el: '#app',
            })
        </script>
    </body>
</html>

效果图

 

 

 

　　③ 作用域插槽

　　--步骤

　　　　1）定义组件时，用 slot 占位

　　　　　　<slot name=' 标识 ' v-bind:任意名称 = ' data 中的键 '></slot>

　　　　2）调用组件

　　　　　　<template v-slot:标识 = ' 任意名称 '>

　　　　　　　　//html 标签

　　　　　　</template>

　　--例子

　　

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <meta charset="UTF-8">
</head>

<body>

    <div id="app">
        <mytag>
            <template v-slot:index='item'>
                this is index
                {{ item.data }}
            </template>
        </mytag>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        // 定义显示数据

        // 定义组件
        Vue.component('mytag', {
            data() {
                return {
                    msg1:'msg1',
                    msg2:'msg2'
                }
            },
            template: `
                <div>
                    <!-- 占位符 -->
                    <slot name='index' :data='msg1'></slot>
                </div>   `
        })
        let vm = new Vue({
            el: '#app',
        })
    </script>
</body>

</html>

效果图

 

 

 

 

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
webopenbie
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
08_组件化-插槽Slot和非父子通信.pptx
01-25
组件化-插槽Slot和非父子通信 在 Vue 中，组件化是非常重要的一环，通过将组件封装成可复用的单元，我们可以更方便地构建应用程序。但是，在封装组件时，我们不能将组件中的内容限制为固定的 div、span 等元素，...
vue中的 $slot 获取插槽的节点实例
10-16
以上就是Vue中关于插槽和$slot的知识点，这部分内容无论对于Vue初学者还是进阶开发者都是非常重要的，因为插槽提供了组件内部布局的灵活性和组件间通信的能力。在开发过程中，能够合理运用插槽可以大大提升组件的...
vue中组件间通信方式-slot
qq_40885461的博客
03-28 560
有时候，header或footer使用同一个组件，那么就需要用slot来从父组件向子组件传递“标签数据” 子组件：Child.vue <template> <div> <slot name="xxx">不确定的标签结构 1</slot> <div>组件确定的标签结构</div> <s...
Vue核心技术-21,slot插槽-内容分发
BraveWangDev
08-21 585
一,前言 Vue组件的三个API来源:props传递参数,events触发事件,slot内容分发 前两个来源已经介绍过了,这一篇就来介绍slot内容分发 二,什么是slot 实际开发中,一些复杂的布局需要多个组件组合来实现 混合父组件的内容与子组件的模板时,需要用到slot进行内容分发, slot也被称作插槽 三,slot的编译作用域 以下这段代码就包含一个插槽: ...
Vue基础
king201811的博客
08-23 160
4.0 组件的通信 【 王者 】 为什么要进行组件通信？ ​ 组件是一个聚合体，将来项目要合并，那么必然各个组件之间需要建立联系，这个联系就是数据通信 分类 父子组件通信 理解： data选项为什么是一个函数？ 组件是一个聚合体，也是一个整体，它需要一个独立的作用空间，也就是它的数据需要是独立的，目前js的最大特点是函数式编程，而函数恰好提供了一个独立作用域，所以我们data在...
VUE组件通信的补充（slot）
一个还在路上的人……
04-25 319
    1.最简单的slotslot（插槽）最简单的用法就是当做父模板的备用内容。当父模板中没内容的时候，子模板中的&lt;slot&gt;***&lt;/slot&gt;将会替代父模板的内容。来看个实例。&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;body&gt;        &lt;div id="app"&gt;            &l
vue组件通信（触发事件、注册事件）详解
gxgalaxy
03-26 2031
文章目录组件事件v-model插槽 组件事件 组件之间经常都会发生消息的传递，我们称之为组件通信 prop是组件通信的一种，消息从父组件传递到子组件 但还有一些场景，就是子组件中发生了一件事，可是它没有能力处理这件事，需要使用它的人来处理，此时，就需要事件 event 例如，倒计时组件停止了，可是停止之后干嘛呢？在不同的场景要做不同的事情，可能什么也不做，可能在页面上显示倒计时结束了，也可能把计时...
Vue作用域插槽slot-scope实例代码
10-18
Vue.js框架提供了灵活的组件通信和复用机制，其中一个非常有用的功能是作用域插槽（scoped slots）。作用域插槽能够让我们在父组件中访问到子组件的数据，并按照父组件的逻辑来渲染这些数据。下面，我们就通过实例...
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
10-16
在介绍Vue Element-UI Table组件的动态生成表头和数据、修改单元格格式以及父子组件通信的过程中，涉及到了Vue框架的诸多核心知识点。以下将详细解释这些知识点。 首先，Vue是一种构建用户界面的渐进式框架。它的...
vue slot插槽.rar
07-19
在Vue中，组件化是其核心特性之一，而slot插槽机制则是实现组件间通信和内容分发的关键工具。本资料"vue slot插槽.rar"显然是针对Vue组件中的slot功能进行深入讲解的。 **一、什么是Vue Slot** Vue Slot是Vue组件...
Vue slot 详解
huangyilinnuli的博客
07-31 1万+
在Vue中，我们使用组件来组织页面和组织代码，类似于搭积木，每一个组件都是一个积木，使用一些相同或者不同组件就能搭建出我们想要的页面。slot（插槽）是组件功能的重要组成部分，插槽必须用于组件才有意义。它为组件提供了对外的接口，允许从组件外部传递内容，并将这部分内容放置到指定的位置。 使用 slot 当一个组件可能被使用至少两次并且两次使用内容（这里指组件视图的组成）不同时，插槽才有存在的必要。注意： 本文的代码都是基于Vue3编写。 基础用法 Link.vue <template> &lt
Vue slot插槽
秋殇阁
09-18 4490
我们对于slot这个概念或许不是很清楚，但是我们在实际的使用中可能已经遇到很多次了。比如我们在使用ivew组件库的时候，就会经常遇到slot这个单词。而实际上，slot的使用更多的是用于独立组件的开发，在加上前面我们了解过的props和events事件，这3个东西可以完成vue中各种复杂的组件。 slot我们中文的翻译是插槽，举个例子，我们中秋节都会吃月饼吧，可是月饼的样子也可能是千奇百怪的，所用...
Vue之slot插槽和作用域插槽
猫老板的豆
11-14 1094
没有slot的情况 &lt;div id="app"&gt; &lt;child&gt; &lt;span&gt;1111&lt;/span&gt; &lt;/child&gt; &lt;/div&gt; &lt;script&gt; // 注册子组件 Vue.component("child&quot
Vue——Slot（插槽) 2019.03更新
lihaoen666的博客
09-30 470
使用方法 我们平常内容，都是在template里面定义的。但在template里面使用slot以后，可以直接在html的组件标签内写内容。实例1<div id = 'app'> <panel> nsdjkfn </panel></div><template id="panel-tpl"> <div class="panel"> <div cla
Vue中slot的介绍与使用（通俗版）
热门推荐
Boboy
04-28 9万+
什么是插槽？ 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 slot官方介绍 Props： name - string，用于命名插槽。 Usage： 元素作为组件模板之中的内容分发插槽。 元素自身将被替换...
slot
烎烎的博客
01-13 1284
解释：slot官网上的定义是“插槽”，又叫内容分发。 实用场景：在实际的一些情况中，子组件往往并不知道需要展示的内容，而只提供基础的交互功能，内容及时间又父组件来提供。 用法：请看以下代码 &lt;div id="app"&gt; //使用包含solt标签属性的子组件 &lt;my-slot&gt; //属性solt值需要与子组件中的slot的name值...
深入理解vue中的slot与slot-scope
weixin_34326558的博客
01-30 736
作者/云荒杯倾 写在前面 vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项在使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于是就关闭了vue的说明文档。 实际上，插槽的概念很简单，下面通过分三部分来讲。这三部分也是按照vue说明文档的顺序来写的。 进入这三部...
vue使用插槽分发内容slot的用法
kingov
10-20 5万+
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 &amp;lt;son-tmp&amp;gt; &amp;lt;div&amp;gt;我是文字，我需要放到son-tmp组件里面制定的位置&amp;lt;/div&amp;gt; &amp;lt;/son-tmp&amp;gt; 单个插槽 父组件app.vue &amp;lt;template&amp;gt; &am
JVC AV-29L31彩电维修手册和图纸.rar
最新发布
08-19
JVC AV-29L31彩电维修手册和图纸
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值