精华内容
下载资源
问答
  • vue封装高级组件

    2021-05-14 11:52:21
    文章目录v-model勾选框组件输入框组件按钮组件地址联动自定义组件 v-model 在自定义组件上使用v-model进行数据的双向绑定 勾选框组件 //调用时 checkbox=false <check-box v-model="checkbox" ></check-...


    v-model

    如果是单向数据流的话,一般用props和$emit就够了。复杂一点的组件,有时候希望数据可以双向联动,子组件也可以直接更改父组件上的数据。这时候可以在自定义组件上使用v-model进行数据的双向绑定

    勾选框组件

    //调用时 checkbox=false
    <check-box v-model="checkbox" ></check-box>
    

    子组件代码如下

    <template>
      <div>
        <input type="checkbox" :checked='checkFlag' @change="$emit('change', $event.target.checked)">勾选协议
        <p>{{checkFlag}}</p>
      </div>
    </template>
    <script>
    export default {
    model:{
        prop:'checkFlag',//命名绑定的model值名字
        event:'change'//当勾选时,触发change事件,change事件改变checkFlag的值
      },
      props:{
        checkFlag:Boolean
      }
    }
    </script>
    

    当点击勾选框时,触发change事件,勾选框的监听到值的变化,将数据通过change事件emit出去
    效果如下:
    在这里插入图片描述

    输入框组件

    //调用时 inputStr='这是测试'
    <check-box v-model="inputStr"></check-box>
    
    <template>
      <div>
        <input type="text" :value='inputStr' @input="$emit('input', $event.target.value)">
        <!-- <input type="text" v-model='inputStr' @input="$emit('input', $event.target.value)"> 也可以 -->
        <p>{{inputStr}}</p>
      </div>
    </template>
    <script>
    export default {
      model:{
        prop:'inputStr',
        event:'input' //这里的事件触发是input,input事件默认改变inputStr的值
      },
      props:{
        inputStr:String
      }
    }
    </script>
    
    

    在这里插入图片描述
    当点击输入框时,触发input事件,勾选框的监听到值的变化,将数据通过input事件emit出去

    按钮组件

    //调用时 checkbox=false
    <check-box v-model="checkbox" ></check-box>
    
    <template>
      <div>
        <button @click="$emit('change',!checkFlag)">通过按钮来改变值</button>
      </div>
    </template>
    <script>
    export default {
      model:{
        prop:'checkFlag',
        event:'change' //change事件改变model的值
      },
      props:{
        checkFlag:Boolean
      }
    }
    </script>
    
    

    效果:
    在这里插入图片描述
    另外,当v-model传递的值为对象时,由于对象原理,指向的是同一个地址,这是不需要$emit事件也能进行数据绑定

    //checkbox:{ flag:false},
    <check-box v-model="checkbox" ></check-box>
    //子组件
    <template>
      <div>
        <button @click="checkFlag.flag=!checkFlag.flag">通过按钮来改变值</button>
      </div>
    </template>
    <script>
    export default {
      model:{
        prop:'checkFlag',
        event:'change' //change事件改变model的值
      },
      props:{
        checkFlag:Object
      },
    }
    </script>
    

    在这里插入图片描述


    上面是简单案例,接下来来写一个地址联动案例

    地址联动自定义组件

    <cascader
      v-model="locationForm"
      v-clickoutside="handleClose1"
      icon="iconPrimary"
      :placeArr1="placeArr1"
      :placeArr2="placeArr2"
      :placeArr3="placeArr3"
      :placeArr4="placeArr4"
    ></cascader>
    //data里面定义locationForm
    locationForm: {
         Place: [],
         PlaceText: ''
       },
       placeArr1: [],
        placeArr2: [],
        placeArr3: [],
        placeArr4: [],
    

    详细代码移步到此链接:示例代码跳转
    效果图如下
    在这里插入图片描述

    展开全文
  • 主要为大家详细介绍了vue2.0多条件搜索组件的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue动态组件 让多个组件使用同一个挂载点,并动态切换,这就是动态组件。 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件。 例子: <div id="app"> <component is...

    vue动态组件

    	让多个组件使用同一个挂载点,并动态切换,这就是动态组件。
    	通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件。
    

    例子:

    <div id="app">
        <component is="one"></component>
    </div>
    <script>
    var one = {template: '<div>我是线路一</div>'};
    var two = {template:'<div>我是线路二</div>'};
    var three = {template:'<div>我是线路三</div>'};
    new Vue({
      el: '#example',
      components: {
        one,
        two,
        three,
      }
    })
    </script>
    
    	上面代码注册了三个组件,在 component 标签里有个属性 is,is=one,所以页面会渲染名字叫 one 的组件,显示结果如下:
    

    在这里插入图片描述
    如果给 is 属性绑定动态值,那么就可以实现组件的动态切换,例子如下:

    <div id="app">
        <button v-for="item in tabs" @click="change = item.id">
        	{{ item.text }}
        </button>
        <component :is="change"></component>
    </div>
    <script>
    var one = {template: '<div>我是线路一</div>'};
    var two = {template:'<div>我是线路二</div>'};
    var three = {template:'<div>我是线路三</div>'};
    new Vue({
      el: '#example',
      components: {
        one,
        two,
        three,
      },
      data() {
        return {
        	change: 'one' // 默认显示组件 one
    	    tabs: [
    	    	{id: 'one', text: '线路一'},
    	        {id: 'two', text: '线路二'},
    	        {id: 'thr', text: '线路三'}
    	    ]
        }
      }
    })
    </script>
    
    	上面代码用 v-bind 给属性 is 动态传递了值,实现了组件的动态切换,效果如下:
    

    在这里插入图片描述

    异步组件

    	异步组件就是定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行加载渲染并缓存,缓存是以备下次访问。
    

    在这里插入图片描述

    new Vue({
      // ...
      components: {
        'my-component': () => import('./my-async-component') // 异步加载
      }
    })
    
    在router中配置,使用以下方法也可以实现按需加载,一个组件生成一个js文件。
    
    {
        path: '/home',
        name: 'home',
        component:resove => require(['@/components/home'],resolve)
    }
    

    缓存

    <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
    和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中
    
    keep-alive生命周期钩子函数:activated、deactivated
    使用<keep-alive>会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。
    
    <!-- 失活的组件将会被缓存!-->
    <keep-alive>
      <component v-bind:is="currentTabComponent"></component>
    </keep-alive>
    

    在这里插入图片描述

    展开全文
  • 动态组件:引入,定义, 注册, 使用缺一不可... // 使用动态组件 <component :is="componentInp"></component> </div> </template> <script type="text/ecmascript-6"> // 引入 imp.

    动态组件用法

    <component :is="组件的名字"></component>

    动态组件使用的场景:根据不同的数据,来渲染不同的组件

    1.动态组件基本使用:引入,定义(这里需要特别注意), 注册, 使用缺一不可!!

    <template>
      <!-- rights组件 -->
      <div class="header">
        // 使用动态组件
        <component :is="componentInp"></component>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
    // 引入
    import Inp from './inp'
    export default {
      data() {
        return {
          // 定义
          componentInp: 'Inp',
        }
      },
      components: {
    // 注册
        Inp,
      }
    }
    </script>
    <template>
      <!-- inp组件 -->
      <div>
        this is inp
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          info: {
            title: 'inp title',
            city: '重庆'
          }
        }
      },
    }
    </script>

    2.动态组件使用场景:根据不同的数据,来渲染组件

    <template>
      <!-- rights组件 -->
      <div>
        <div v-for="(val, key) in newDate" :key="key">
          <component :is="val.type"></component>
        </div>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
    import a1 from '../user/A'
    import b1 from '../user/B'
    export default {
      data() {
        return {
          newDate:{1:{
            type: a1 // 这里类似定义组件
          },
          2:{
            type: b1
          },
        }
        }
      },
      // 无需注册组件
      components: {
    
      }
    }
    </script>
    
    <style lang="scss" scoped></style>

     A和B 组件结构一致

    <template>
      <div>
        a组件
      </div>
      
    </template>
    
    <script>
    export default {
      data() {
        return {
        }
      },
     
    }
    </script>
    
    <style>
    
    </style>

    3.动态组件使用场景

    v-once:第一次渲染就会放在内存中,不会被销毁,主要用于静态数据

    父组件home

    <template>
        <div>
            <h1>home组件</h1>
            <p>动态组件及v-once</p>
            <!-- <child1 v-if="type==='child1'"></child1>
            <child2 v-if="type==='child2'"></child2> -->
            <component :is="type"></component>
            <button @click="change">切换</button>
        </div>
      
    </template>
    
    <script>
    import child1 from './Child1'
    import child2 from './Child2'
    export default {
        data() {
            return {
              type: 'child1'  
            }
        },
        components: {
            child1,
            child2
        },
        methods: {
            change() {
                this.type = this.type ==='child1' ? 'child2' : 'child1'
            }
        }
    }
    </script>

    子组件child1和child2

    <template>
        <div v-once>
            child1组件
        </div>
    </template>
    <template>
        <div v-once>
            child2组件
        </div>
    </template>

     

    展开全文
  • Vue组件高级用法之组件递归 在项目中有时需要使用组件递归,如后台管理系统的侧边栏 我们可以在组件内部写上name值 export default { name: "submenu", // 必须给name值 } 然后在本组件中直接调用自身即可,必须要...

    Vue组件高级用法之组件递归

    在项目中有时需要使用组件递归,如后台管理系统的侧边栏

    我们可以在组件内部写上name

    export default {
      name: "submenu",  // 必须给name值
    }
    

    然后在本组件中直接调用自身即可,必须要有if条件判断,否则会进入死循环

    // 必须加v-if条件,否则调用会进入死循环,程序会崩
    <el-submenu v-if="menu.children && menu.children.length">
    	<submenu :menuData="menu.children"></submenu>  // 只看这里就行, name值调用自己
    </el-submenu>
    <el-menu-item v-else>
    </el-menu-item>
    
    展开全文
  • 背景介绍:随着项目越来越大,性能问题已经成为了困扰业务发展的重要因素。...突然了解到vue的异步组件,于是便专门研究实践了一下。首先看一下官网对异步组件的介绍:嗯,比较简单的介绍,不过这个特性确实是我...
  • 1.动态组件 :is = “component-name” 用法 需要根据数据,动态...vue高级特性</p> <hr> <!-- 动态组件 --> <component :is="NextTickName"></component> </div> </tem
  • 书接上回,上篇介绍了vue组件通信比较有代表性的几种方法,本篇主要讲述一下组件的高级用法和最佳实践,争取用最少的篇幅占领高地!(多说一句,后续这个系列会有vue最佳实践和源码解读,我总有办法能让大家看懂,...
  • 从github上看到一个不错的开源项目:https://github.com/lavyun/vue-demo-search,自己琢磨着不看代码做了一遍学习了不少,现将碰到的坑与填坑过程分享出来。首先看一下demo的界面:简单来说就是一个复刻各大搜索...
  • Vue封装组件的过程

    万次阅读 多人点赞 2018-03-20 09:41:05
    vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素,封装可重用代码 ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 ● 有些情况下,组件也可以表现用 ...
  • Vue父子组件

    2021-02-01 14:06:12
    ###Vue中父组件箱子组件传递数据的几种方法 1.基本概念 在vue中,父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送信息。 每个Vue实例都实现了...
  • 使用VueJS的动态组件

    2021-08-08 10:46:46
    首先,如果您刚开始使用VueJS,这对您来说可能有点太高级了,我强烈建议您阅读VueJS上的文档,尤其是组件。前言根据用户输入交换组件,甚至只是通过json文件设置表单,这是一个非常有用的方法,可以在整个大项目中...
  • 组件主动获取子组件的值1.在调用子组件的时候定义一个ref-> ref="header"2.在父组件中通过this.$refs.header.属性,调用子组件的属性,例如this.$refs.header.name在父组件中通过this.$refs.header.方法,调用...
  • 学习vue高级用法 父子组件要始终保持单向数据流动 否则随着业务增长,代码会变得难以维护与调试,因为数据变化的触发点很难找到 解决方案: 子组件通过this.$emit()事件通知父组件来做处理(sync关键字是帮助...
  • vue组件获取子组件数据对象

    千次阅读 2020-12-24 03:59:22
    updated哦,根据你对于问题的更新,按我的理解的话,你是想要在父组件内获取到子组件的 vm 对吧,比如父组件有一个 options 属性,其值为所有子组件的 option 属性形成的数组或者直接是子组件 vm 本身,对吗?...
  • Vue高阶组件实现

    千次阅读 2020-01-20 10:00:56
    目录 一、高阶组件概念 二、目标 ...假如我们有一个组件,我们希望通过某个函数,去扩展它,得到一个新的组件,新的组件有完全的参数组件的行为,如果这点可以满足,那么其他扩展就可以针对性的...
  • 能够构建出色的单页应用程序(SPA)是 Vue.js 最具有吸引力的功能之一。SPA 非常好,因为它们不需要在...在本教程中,我将介绍设置 Vue Router 的基础知识,并研究一些更高级的技术,例如:动态路由匹配导航挂钩(Na...
  • vuetablesVuejs网格组件

    2019-08-12 00:56:49
    vue-tables - Vue.js网格组件
  • 高级前端-Vue组件世界

    千次阅读 多人点赞 2021-04-21 11:25:07
    1. 跨层级访问:$emit,组件过多时会很麻烦,vue提供了$root和$parent两个属性(强耦合),访问组件根节点和父节点,父组件通过ref访问子组件 2. 依赖注入:父组件provide对应属性,子组件通过injected去使用...
  • vue高级组件通信

    2021-04-13 16:15:14
    vue高级组件通信 一、组件通信高级之自定义事件和原生事件 1.素材准备 在src----pages----Communication 将组件的路由复制过来,放在路由的重定向上面 2.原生事件和自定义事件概念 原生事件:是不需要手动分发的...
  • 1、slot的基本使用 (1)slot的使用,抽取共性,保留不同 (2)slot可以设置默认值 (3)如果有多个值放入slot中,会同时替换 Title-hellovuejs 这是span内容 这是i的内容 我是组件 我是组件内容 按钮 2、slot的使用...
  •   今天小编推荐一款强大的表格组件,一个基于vue的PC端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼...
  • vue table组件封装

    千次阅读 2019-09-17 15:45:07
    组件 <template> <div class="table-wrap"> <table class="base-table"> <slot></slot> <tbody> <tr v-for="(item,index) in list" :key="index"> ...
  • vue 组件大全

    千次阅读 2018-06-15 11:06:37
    UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue ...
  • Vue高阶组件

    2021-03-02 18:26:19
    Vue中复用代码的主要方式是使用mixins,并且在Vue中很少提到高阶组件的概念,这是因为在Vue中实现高阶组件并不像React中那样简单,原因在于React和Vue的设计思想不同,但并不是说在Vue中就不能使用高阶组件,只...
  • html:组件渲染的基本过程main.js:import Vue from "vue";import Home from "./home.vue";new Vue({el: "#app",template: "",components: { Home }});home.vue{{text}}export default {name: "home",data() {return...
  • 组件 <template> <div class="menu-list"> <a-menu mode="inline" style="width: 256px"> <template v-for="item in list"> <a-sub-menu :index="item.key" :key="item.key" v-if=...
  • 之前是做过一个多页面的改造,以及引入vux的ui组件,这次在这个项目的基础上,再来聊聊vue中的component。别问我为啥总是写关于vue的博客,都是为了生计(………………)关于一些组件的概念之类的就不一一介绍了,官方...
  • slot具名插槽 通过 slot 的 ...VUE组件自定义事件在父组件显示 <template> <div> <h3>父组件</h3> 输入得显示:{{value}} <child v-on:huoQuNums="aaa"> <span slot="hea...
  • 本篇文章主要讲的是嵌套数据递归展示的...但是对于组件应用以及组件高级应用(递归),会让很多人理解起来比较费劲,也讲讲比较容易入坑的地方。众所周知,vue的初始化是这样的(附常用初始属性名):var vue = new ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,799
精华内容 6,719
关键字:

vue动态组件高级

vue 订阅