Vue中的插槽slot、动态组件、对象混入、指令、动态获取数组内容

最新推荐文章于 2024-09-02 20:20:48 发布
最新推荐文章于 2024-09-02 20:20:48 发布
阅读量1.5k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51066068/article/details/124940155
版权

目录

Vue中的插槽问题

Vue动态获取数组内容综合案例

Vue中动态组件

 Vue中对象混入问题

 Vue中的指令

Vue中的插槽问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <hr />
      <my-com></my-com>
      <hr />
      <my-com>
        <!-- //添加给哪个插槽 -->
        <!-- 访问不到组件内的数据comMsg-->
        <template v-slot:default>aaaa--{{msg}}</template>
        <!-- //v-slot:slot2 缩写 #slot2  只有这样写才能传参 -->
        <template #slot2="scope">
          bbbb--{{scope.comMsg}}--{{scope.title}}--{{scope.age}}
        </template>

        <!-- #slot2="{comMsg}"  解构得到comMsg -->
        <template #slot2="{comMsg}"> BBB--{{comMsg}} </template>
      </my-com>
    </div>

    <script>
      let myCom = {
        //注册的组件内一定是函数
        data() {
          return {
            comMsg: "组件的msg",
          };
        },
        //如果设置为默认插槽，则都会被  我不好  这个值覆盖
        //如果不想被覆盖，那就要  具名化 进行区分
        template: `
      <div>
        <slot name="default" >默认内容1</slot>
        <div>111111111</div>
        <div>222222222</div>
        <slot name="slot2" :comMsg='comMsg' title='这是title' :age="20">默认内容2</slot>
      </div>`,
      };
      Vue.component("my-com", myCom);
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        methods: {},
      });
    </script>
  </body>
</html>

 

Vue动态获取数组内容综合案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <!-- 用一个组件完成数据表格的渲染  数据：学生数组， 老师数组， 课程数组 -->
    <div id="app">
      {{msg}}
      <hr />
      <!-- //这样就写死了，需要动态获取多少行的数据 -->
      <!--  <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>张三</td>
            <td>23</td>
          </tr>
          <tr>
            <td>2</td>
            <td>张张</td>
            <td>22</td>
          </tr>
        </tbody> -->
      学生数组:
      <my-table :data="students">
        <template #header>
          <th prop="id">编号</th>
          <th>学号</th>
          <th>年龄</th>
        </template>
        <template #body="scope">
          <td>{{scope.row.id}}</td>
          <td>{{scope.row.name}}</td>
          <td>{{scope.row.age}}</td>
        </template>
      </my-table>

      <hr />
      老师数组:
      <my-table :data="teachers">
        <template #header>
          <th prop="id">编号</th>
          <th>学号</th>
          <th>年龄</th>
          <th>性别</th>
        </template>
        <template #body="scope">
          <td>{{scope.row.id}}</td>
          <td>{{scope.row.name}}</td>
          <td>{{scope.row.age}}</td>
          <td>{{scope.row.gender}}</td>
        </template>
      </my-table>

      <hr />
      课程数组:
      <my-table :data="courses">
        <template #header>
          <th prop="id">编号</th>
          <th>名字</th>
          <th>描述</th>
        </template>
        <template #body="scope">
          <td>{{scope.row.id}}</td>
          <td>{{scope.row.name}}</td>
          <td>{{scope.row.desc}}</td>
        </template>
      </my-table>
    </div>

    <script>
      Vue.component("my-table", {
        props: ["data"],
        data() {
          return {};
        },
        template: ` 
        <table>
            <thead>
          <tr>
            <!-- //在不能写死的部分使用插槽 -->
            <slot name="header"></slot>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in data" :key="index">
            <slot name="body" :row="item"></slot>
          </tr>
            </tbody>
        </table>
            `,
      });
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          students: [
            {
              id: 1,
              name: "张三",
              age: 23,
            },
            {
              id: 2,
              name: "小明",
              age: 20,
            },
          ],
          teachers: [
            {
              id: 1,
              name: "小李",
              age: "30",
              gender: "male",
            },
            {
              id: 2,
              name: "小红",
              age: "30",
              gender: "sex",
            },
            {
              id: 3,
              name: "小清",
              age: "30",
              gender: "sex",
            },
          ],
          courses: [
            {
              id: 1,
              name: "html",
              desc: "超文本",
            },
            {
              id: 2,
              name: "css",
              desc: "层叠样式",
            },
          ],
        },
        methods: {},
      });
    </script>
  </body>
</html>

Vue中动态组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <hr />
      <button @click="currentCom='com-a'">A组件</button>
      <button @click="currentCom='com-b'">B组件</button>
      <button @click="currentCom='com-c'">C组件</button>
      <div style="border: 2px solid red; width: 200px; height: 200px">
        <!-- 静态is值  值为注册的组件的名称-->
        <!-- <component is="com-a"></component> -->
        <!-- 动态is值  值为绑定的一个变量名称-->
        <!-- //频繁组件切换，没有数据更新，可以用keep-alive标签组件缓存起来 -->
        <keep-alive>
          <component :is="currentCom"></component>
        </keep-alive>
        <!-- 不可行 -->
        <!-- <component :is="comC"></component>
        <component is="comC"></component> -->
      </div>
    </div>

    <script>
      let comA = {
        template: `
            <div>A 组件的内容</div>
            `,
        created() {
          console.log("A组件的created");
        },
      };
      let comB = {
        template: `
            <div>B组件的内容</div>
            `,
        created() {
          console.log("B组件的created");
        },
      };
      let comC = {
        template: `
            <div>C组件的内容</div>
            `,
        created() {
          console.log("C组件的created");
        },
      };

      Vue.component("com-a", comA);
      Vue.component("com-b", comB);
      Vue.component("com-c", comC);

      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          currentCom: comC,
        },
        methods: {
          clickBtn() {},
        },
      });
    </script>
  </body>
</html>

 Vue中对象混入问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}--{{mixMsg}}--{{obj}}
      <br />
      <button @click="test">按钮</button>
    </div>

    <script>
      // 声明一个混入对象
      let mixin = {
        data() {
          return {
            mixMsg: "混入的msg",
            //优先使用组件中的方法
            msg: "混入msg",
            obj: {
              name: "张三",
              age: 20,
            },
          };
        },
        created() {
          console.log("混入的created");
        },
        methods: {
          test() {
            console.log("这是混入test方法");
          },
        },
      };

      /*  //全局混入
      Vue.mixin(mixin); */

      //混入之后
      //数据模型data当中的属性会递归合并，有属性重名时，组件数据优先
      //声明周期合并，两个都会合并，两个都会执行，混入的钩子在组件自生钩子之前调用
      //值为对象的选项，methods、components、directives合并成一个对象，如果两个键名重名，以组件对象的值为主

      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        // 局部混入
        mixins: [mixin],
        data: {
          msg: "hello",
        },
        created() {
          console.log("组件的created");
        },
        methods: {
          test() {
            console.log("组件test方法");
          },
        },
      });
    </script>
  </body>
</html>

 Vue中的指令

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <input type="text" />
      <br />
      <input type="text" v-focus />
    </div>

    <script>
      //声明指令
      let myFocus = {
        bind(el, binding, vNode, oldNode) {},
        inserted(el, binding, vNode, oldNode) {
          console.log(el);
          el.focus(); //聚焦元素
        },
        update(el, binding, vnNde, oldNode) {},
        componentUpdated(el, binding, vNode, oldNode) {},
        unbind(el, binding, vNode, oldNode) {},
      };

      //指令全局注册
      Vue.directive("focus", myFocus);
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        methods: {},
      });
    </script>
  </body>
</html>

哪个input框添加了v-focus 光标就定位到哪里

 

The..Fuir
关注
专栏目录
2020-11-19 Vue——插槽、动态组件、混入、自定义指令
赵小贝的博客
11-19 217
插槽 普通插槽 插槽允许我们在调用子组件的时候为子组件传递模板 <div id="app"> <test> <template>你好</template> </test> </div> <script> let test = { template:` <div>
Vue 组件通信 scoped ref属性 is动态组件 插槽 混入 缓存组件
ILove_bugs的博客
11-29 633
v-if与v-show的生命周期影响 再深刻认识 v-if和v-show以及组件的生命周期 v-if对组件的生命周期每次都会执行一遍 而v-show只会执行一遍。 1. scoped 样式的问题 我们需要为一个.vue中的style添加一个scoped属性，以保证样式也是局部的。 <style scoped> ​ </style> app.vue中的样式是全局的 <style> ​ ​ .box{ margin:20px; ...
React学习笔记记录
h_el_lo的博客
10-10 166
React特点： 声明式编码 组件化编码 支持客户端和服务器端的渲染 高效 单向数据流 高效原因： 操作虚拟DOM. DOM Diff算法，最小化页面重绘。 导入的相关库文件： react.js, react-dom.js, babel.min.js jsx 全称: JavaScript XML react定义的一种类似于XML的JS扩展语法: XML+JS 作用: 用来创建react虚拟DOM(元素)对象 js中直接可以套标签, 但标签要套js需要放在{}中 在解析显示j.
Vue.js使用axios动态获取response里的data数据操作
10-14
主要介绍了Vue.js使用axios动态获取response里的data数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【前端9】手风琴v1.0版本：使用插槽实现动态内容插入的Vue组件
最新发布
定期分享我的发现和想法，感谢你的陪伴和支持
09-02 1391
这行代码的作用是切换折叠项的展开和收起状态。如果当前折叠项已经展开，则收起它；如果当前折叠项未展开，则展开它。通过这种方式，可以实现折叠面板的交互效果。
【Vue】组件插槽；vue自定义指令；$ref使用(获取DOM对象或者组件对象)；$netTick使用
wusandaofwy的博客
09-21 2064
组件插槽 插槽slot使用 具名插槽 作用域插槽 vue自定义指令 自定义指令：局部注册 自定义指令:全局注册 $ref使用(获取DOM对象或者组件对象) ref用于标签 ref用于组件 $netTick使用 组件使用v-model(v-model底层原理
Vue 框架如何获取数组中的值？
Itmastergo的博客
08-21 4650
通过定义一个计算属性来获取数组中的值，可以在计算属性中使用JavaScript的数组索引操作来实现。在Vue中，可以通过在模板中使用差值表达式或指令来获取数组中的值。Vue中的方法可以在模板中通过调用方法来获取数组中的值。需要注意的是，以上方法都是基于Vue的响应式系统进行的，当数组的值发生变化时，相关的视图也会自动更新。这些方法提供了在Vue框架中获取数组中值的不同方式，你可以根据具体的需求选择适合的方法。指令可以在模板中循环渲染数组的每个元素，并提供访问当前元素的值和索引的能力。
vue获取数据
runningcodeman的博客
08-22 1137
模拟假数据 拷贝相似字段数据 去目标网站上找一个所需要的数据格式，然后copy，放入json文件中，再格式化文档即可。 使用第三方mock.js来生成json数据【即用代码来生成数据】 mockjs.com 需要任何关于此种方法生成数据的方案都可以来这个网站查询方法。 安装 npm i mockjs 使用 // 使用 Mock var Mock = requi...
Vue.js：Vue-Router动态路由从服务器接口获取路由数据
彭世瑜的博客
03-28 4735
用户可以添加新的分类，分类和路由的显示方式一致，拥有和路由相同的逻辑，故而采用通过服务端返回数据生成动态路由的方式解决。既然是动态路由，所以需要响应式，当路由数据发生变化时，可以及时的获取通知。页面上显示的时候，需要从vuex获取路由信息，可以及时刷新页面数据。通过服务端接口返回的数据生成路由，是异步返回的数据，动态添加。可以通过Vue-Router提供的api，动态添加路由数据。动态路由首次跳转的时候，动态路由还没有添加，需要转换处理。该接口获取的路由数据是一维数组，和路由配置格式不一样。
vue 内的 对象 获取 键值对_Vue常用API整理
weixin_29554849的博客
12-23 3864
全局配置(Vue.config)Vue.config是一个与全局配置有关的对象，可以在启动应用之前修改下列属性。1.silent类型： Boolean取消Vue所有的日志和警告Vue.config.silent = false2.optionMergeStrategies类型：Function自定义合并策略的选项。合并策略选项分别接受第一个参数作为父实例，第二个参数为子实例，Vue实例上下文被作为...
Vue（插槽、混入、过滤器）
qq_48108860的博客
04-11 668
插槽 普通插槽，具名插槽，作用域插槽 插槽允许我们在调用子组件的时候为子组件传递模板。 <slot> 元素作为承载分发内容的出口。 父级模板里的所有内容都是在父级作用域中编译；子模板里的所有内容都是在子作用域中编译。 在插槽默认模板中，可以直接访问子组件的数据，可以通过props间接访问父组件的数据。 在插槽自定义模板中，可以直接访问父组件的数据，可以通过作用域插槽间接访问子组件的数据。 默认插槽、匿名插槽 如果子组件当中有内容,则显示子组件中的内容；如果子组件当中没有内容,则显
vue中的 $slot 获取插槽的节点实例
10-16
今天小编就为大家分享一篇vue中的 $slot 获取插槽的节点实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue如何获取数据列表展示
12-13
这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。 一、展示 二、源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document
Vue插槽，组件，可复用技术
weixin_46285310的博客
08-27 391
1. 插槽 1.1 分类 插槽分为：普通插槽，具名插槽，作用域插槽 1.1.1 普通插槽 插槽允许我们在调用子组件的时候为子组件传递模板 插槽可以放任何东西，默认不指定位置是放在main里 <slot></slot> <template v-slot="default"> 默认插槽 </template> 1.1.2 具名插槽 为了不混淆，默认插槽，内容是放入main里，为了实现我们想要的效果，这里就有了具名插槽，说白了就是具有名
vue 中的 $slot 获取 插槽的节点
zy_lalala的博客
03-21 1553
vue 中的 $slot
Vue.js之组件插槽的使用
weixin_44827643的博客
07-20 1048
本文主要介绍Vue.js中组件插槽的使用，包括基本使用、具名使用以及父组件操纵子组件的内容。
vue 动态插槽 v-slot #
Li_Ning21的博客
05-25 7286
vue 动态插槽 今天遇到一个需求要动态插槽减少template中的代码量，查了好多资料，发现讲的都不够细致， 把我最后实现效果展现出来： <el-table :columns="columns" :data="list" <template v-for="item in templateSlot" v-slot:[item]="scope" > <div :key="item"> {{ sc
认识Vue中组件利器-插槽Slot-案例介绍
JackieDYH的博客
05-25 1377
一. 插槽的使用 1.1. 认识插槽slot 在开发中，我们会经常封装一个个可复用的组件： 前面我们会通过props传递给组件一些数据，让组件来进行展示； 但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素； 比如某种情况下我们使用组件希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片； 我们应该让使用者可以决定某一块区域到底存放什么内容； 举个栗子：假如我们定制一个通用的导航组件 - NavBa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值