VUE 插槽 slot (代码+图解)

作者:神秘网友 发布时间:2020-10-29 03:32:20

VUE 插槽 slot (代码+图解)

VUE 插槽 slot (代码+图解)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id='app'>
    <todo>
       <todo-title slot="todo-title" :title="title"></todo-title>
       <todo-items slot="todo-items" v-for="item in todoItems"" :item="item"></todo-items>
    </todo>
  </div>
<script>

  // slot 插槽
  Vue.Component("todo",{
    template: '<div>\
                  <slot name ="todo-title"></slot>\
                  <ul>\
                    <slot name-"todo-items"></slot>\
                  </ul>\
                </div>'
  });

  Vue.component("todo-title",{
    props:['title'],
    template:'<div>{{title}}</div>'
  });
  Vue.component("todo-items",{
    props:['item'],
    template:'<li>{{item}}</li>'
  });

  var vm = new Vue({
    el:"#app",
    data:{
      title:"学习VUE",
      todoItems:['学习VUE','学习angular','学习react']
    }
  });
</script>

</body>
</html>

VUE 插槽 slot (代码+图解)

配合上潦草的图片更容易食用~

VUE 插槽 slot (代码+图解)相关教程

  1. Vue结合webpack使用vue-router

    Vue结合webpack使用vue-router 一、先安装vue-router模块 npm i vue-router -S 二、导入vue-router包 importVueRouterfrom'vue-router' 三、手动安装VueRouter Vue.use(VueRouter) 四、创建路由对象 varrouter=newVueRouter({ routes:[ {path:'/account',comp

  2. 在vscode中执行vue add typescript时出现vue : 无法加载文件

    在vscode中执行vue add typescript时出现vue : 无法加载文件 错误如下: PS D:\work\vue\workbench vue add typescriptvue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\InstallFile\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。有

  3. 新手必备系列之vue-cli脚手架+element-ui+aixos 构建前端项目流

    新手必备系列之vue-cli脚手架+element-ui+aixos 构建前端项目流程 1、下载vue-cli ( npm install -g vue-cli) 2、构建项目( vue init webpack my-project)构建项目到指定文件夹下,参考 3、修改package.json的compression-webpack-plugin(打包),默认加

  4. vue父子组件传值:详解父组件向子组件传值(props)

    vue父子组件传值:详解父组件向子组件传值(props) vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件。 2)这个自定

  5. Vue组件--动态组件--[Vue warn]: Unknown custom element: <abc

    Vue组件--动态组件--[Vue warn]: Unknown custom element: <abc> - did you register the component correctly? 首先摆上错误代码 以下是正确代码 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initi

  6. 在vant使用插槽自定义图标

    在vant使用插槽自定义图标 1.在每个带图标的组件下面会有相应的v-slot name说明 2.在组件中使用 (这里用的是阿里巴巴的icon font) van-field v-model=user.mobile center icon-prefix=toutiao left-icon=shouji placeholder=请输入手机号码 style=position:re

  7. vue父子组件间的数据传递

    vue父子组件间的数据传递 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title父子组件的数据传递/title script src='./vue.js'/script/headbody div id=root counter/counter counter/counter /div script var counter = { template: 'div0/div' } var

  8. vue 实时监听数据实现报警功能

    vue 实时监听数据实现报警功能 项目需求: 项目中需要实时监听数据变化达到预定值后,会触发报警功能(报警弹窗提示) 问题描述: 1.前台在不断获取数据时候数据传输过程中,要避免数据一直积累,页面越来越卡; 2.该报警功能需要在所有页面中进行监听; 解决