vue父子组件slot插槽的使用

目录
  • vue父子组件slot插槽
    • 1.创建一个子组件并在vue实例中注册
    • 2.在HTML代码中使用子组件
    • 3.在vue实例中写入想要插入到子组件的内容
    • 4.在子组件的模板中通过一个slot标签
  • vue插槽v-slot实现父向子传值

vue父子组件slot插槽

关于父组件在使用子组件的时候，向子组件插入内容的方法

1.创建一个子组件并在vue实例中注册

这是创建子组件

var testzujian = {
        template:`<div>
            <span>这是子组件的内容</span>   
            </div>`
    }

这是注册子组件

let vm = new Vue({
    el:'.root',
     components:{
            testzujian:testzujian
        },
})

2.在HTML代码中使用子组件

<body>
    <div class="root">
        <testzujian></testzujian>    
    </div>
</body>

3.在vue实例中写入想要插入到子组件的内容

let vm = new Vue({
        el:'.root',
        components:{
            testzujian:testzujian
        },
        template:`<div>
            <testzujian>
                <template v-slot:slotcontent>
                    <span>这是父组件向子组件插入的内容</span>    
                </template> 
            </testzujian>
            </div>`,
    })

其中template是一个模板字符串，这个模板字符串里面最外面的div标签是根目录，必须存在。

根目录之下的是已经注册的子组件，也是需要加内容的子组件标签，必须存在

子组件标签之内的也是必须存在的

其上的属性v-slot绑定了一个名字slotcontent，这个名字可以随意取，但必须得有

这个标签里面就用来添加

父组件想要插入子组件的内容

4.在子组件的模板中通过一个slot标签

来引入父组件模板中内添加的内容

var testzujian = {
        template:`<div>
            <span>这是子组件的内容</span>
            <slot name="slotcontent">
            </slot>    
            </div>`
    }

这是刚才创建好的子组件，现在在其template的模板中，加入了一个slot标签，属性name绑定为刚才中v-slot：绑定的名字，也就是slotcontent

vue插槽v-slot实现父向子传值

// 子组件代码
<template>
  <div class="child">
    <h4>this is child component</h4>
    <p>收到来自父组件的消息：
      <slot name="child"></slot>  <!--展示父组件通过插槽传递的{{message}}-->
    </p>
  </div>
</template>

//父组件代码
<template>
  <div class="parent">
    <h3>this is parent component</h3>
    <input type="text" v-model="message" />
    <Child>
      <template v-slot:child>
        {{ message }}  <!--插槽要展示的内容-->
      </template>
    </Child>
  </div>
</template>

<script>
import Child from './child'
export default {
  name: 'Parent',
  data() {
    return {
      message: '内容',
    }
  },
  components: {
    Child,
  },
}
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 前端架构vue架构插槽slot使用教程

    前端架构vue架构插槽slot使用教程

    目录 1.直接使用 2.设置默认值 3.多个slot用法 4.作用域插槽 5.动态插槽名 1.直接使用 新建组件 Article <template> <div> 日期:2022-01-15 <slot></slot> </div> </template> 新建 Learn,并在 Learn 中使用 Article Learn.vue 和 Article.vue 在同一文件夹下 <template> <div>

  • 浅谈Vue中插槽slot的使用方法

    浅谈Vue中插槽slot的使用方法

    如何定义和使用: 在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值,如果slot标签没有声明name属性值,在使用插槽时将默认从第一个插槽依次往下放置,为了方便使用,一般都会都插槽slot指定一个name属性值,当要使用该插槽时,只需要在要使用的标签内添加slot='插槽名字',就可以将指定的标签放到指定的插槽内,插槽内可以是任意内容. 举例: <!DOCTYPE html> <html lang="en"> <head&

  • vue作用域插槽详解、slot、v-slot、slot-scope

    vue作用域插槽详解、slot、v-slot、slot-scope

    目录 vue 插槽slot和具名插槽 作用域插槽的核心作用是 实例说明 子组件 父组件 效果图 vue 插槽slot和具名插槽 作用都是在调用组件的时候传递一些DOM结构进去, 不同点是:具名插槽在传递DOM时需要声明,传递给哪个slot的名字 name 他们用法简单不在赘述. 重点说一下作用域插槽 slot-scope 的使用,以及vue2.6.X开始的新语法v-slot 作用域插槽的核心作用是 子组件给父组件传递数据,当然也包含上述插槽的能力 老版作用域插槽, slot="test"

  • Vue3插槽Slot实现原理详解

    Vue3插槽Slot实现原理详解

    目录 Vue官方对插槽的定义 Slot到底是什么 如何使用插槽 回顾组件渲染的原理 插槽的初始化原理 解析插槽中的内容 作用域插槽原理 具名插槽原理 默认内容插槽的原理 Vue官方对插槽的定义 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. Slot到底是什么 那么Slot到底是什么呢?Slot其实是一个接受父组件传过来的插槽内容,然后生成VNode并返回的函数. 我们一般是使用 <

  • Vue插槽slot详细介绍(对比版本变化,避免踩坑)

    Vue插槽slot详细介绍(对比版本变化,避免踩坑)

    目录 插槽是什么? 怎么使用插槽? 基本用法 后备(默认)内容 具名插槽 作用域插槽 插槽版本变化 总结 Vue中的插槽(slot)在项目中用的也是比较多的,今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化. 插槽是什么? 插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML.组件等,填充的内容会替换子组件的<slot></slot>标签.简单理解就是子组

  • Vue深入理解插槽slot的使用

    Vue深入理解插槽slot的使用

    目录 一.插槽(slot)是什么 二.使用场景 三.slot的分类 默认插槽 具名插槽 作用域插槽 四.介绍对slot的理解 一.插槽(slot)是什么 slot是组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充. 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信方式,适用于父组件===>子组件 例子: //父组件中 <Category> <div>html结构</div> </Category> //子组件中: &l

  • vue2中插槽(slot)的基本使用规范

    目录 前言 基础slot组件(匿名插槽) 具名插槽 作用域插槽 解构插槽 总结 前言 在vue的开发过程中,我们会经常使用到vue的slot插槽组件,vue官方文档的描述: Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将元素作为承载分发内容的出口 slot大概分为以下几种: 基础slot组件(匿名插槽) 匿名插槽主要使用场景并不涉及特别复杂的业务,更像是纯展示组件内容 <!--子组件--> <template>   

  • vue父子组件slot插槽的使用

    目录 vue父子组件slot插槽 1.创建一个子组件并在vue实例中注册 2.在HTML代码中使用子组件 3.在vue实例中写入想要插入到子组件的内容 4.在子组件的模板中通过一个slot标签 vue插槽v-slot实现父向子传值 vue父子组件slot插槽 关于父组件在使用子组件的时候,向子组件插入内容的方法 1.创建一个子组件并在vue实例中注册 这是创建子组件 var testzujian = {         template:`<div>             <span&

  • 浅谈Vue父子组件和非父子组件传值问题

    本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat

  • vue父子组件的嵌套的示例代码

    vue父子组件的嵌套的示例代码

    本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t

  • Vue 父子组件、组件间通信

    本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件.组件间通信的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport"

  • Vue 父子组件的数据传递、修改和更新方法

    父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c

  • Vue父子组件之间的通信实例详解

    在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 一.父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).vue提倡单项数据流,因

  • Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    当我们在书写 vue 组件的时候,也许可能会用到数据传递:将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件: 每当我们遇到这样的需求的时候,我们总是会想到有三种解决办法: 通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex 非父子组件的通信传递 Vue Event Bus ,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递. 后来再逛社区的时候我又发现了还有第四种传递方式, inheritAttrs +

  • Vue父子组件双向绑定传值的实现方法

    父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的 v-model 了,例如 <input type="text" /> 它会响应表单元素的 value 属性,当输入框文本改变时,会将 value 值传给 v-model 所绑定的变量,如果同时设置 v-model 和 value , value 属性无效. 父子组件的自定义双向 v-model 当若干dom封装成组件时,在父组件中

  • vue父子组件的通信方法(实例详解)

    一.父组件向子组件传递数据 1.首先形成父子组件关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body>

  • 深入理解Vue父子组件生命周期执行顺序及钩子函数

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图 在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子 生命周期钩子 详细 beforeCreate 在实例

随机推荐