精华内容
下载资源
问答
  • 将对应组件数据添加进数组 步骤三:使用动态组件,:is 属性绑定组件名 案例:动态组件实现 tab 选项卡功能,监听对象中属性变化,深度监听 页面一 页面二 {{content}} vue 动态绑定 class 常见方式

    数组发生变化时,动态组件加载相应内容 

    场景:点击不同组件名称,界面显示相应组件

    思路:页面一、页面二界面完全一样只是内容不同,使用同一个组件模版

    步骤一:导入所需组件,在 components 中注册

    步骤二:点击 tab 选项卡,将对应组件数据添加进数组

    步骤三:使用动态组件,:is 属性绑定组件名

    <div v-for="(item, index) in componentData" :key="index">
      <components :is="item.componentName" :params="item.componentContent"/>
    </div>

    案例:动态组件实现 tab 选项卡功能,监听对象中属性变化,深度监听

    <!-- DynamicComponent.vue -->
    <template>
      <section class="wrapper">
        <ul class="tab">
          <li @click="clickTab('pageOne')" :class="{active: isActive}">页面一</li>
          <li @click="clickTab('pageTwo')" :class="{active: !isActive}">页面二</li>
        </ul>
        <div class="layout">
          <div v-for="(item, index) in componentData" :key="index">
            <components :is="item.componentName" :params="item.componentContent"/>
          </div>
        </div>	
      </section>
    </template>
    
    <script>
    import tabPage from './components/tabPage'
    export default {
      name: 'DynamicComponent',
      components: {
        tabPage,
      },
      data () {
        return {
          isActive: true, // 控制选项卡样式是否显示
          componentData: [
            { 
              id: 'pageOne',
              componentName: 'tabPage', 
              componentContent: {
    	          msg: "内容1"
              }, 
            },
            { 
              id: 'pageTwo',
              componentName: 'tabPage', 
              componentContent: {
    	          msg: "内容2"
              }, 
            },		
          ]
        }
      },
      methods: {
        clickTab(val){
          this.componentData = []
          // 激活当前选项卡
          this.isActive = val == 'pageOne' ? true : false 
          console.log('val', val)
          this.componentData.push({
            id: val,
            componentName: 'tabPage',
            componentContent: {
              msg: `内容${val == 'pageOne' ? 1 : 2}`,
            }
          })
        }
      },
    }
    </script>
    
    <style>
      .wrapper{
        padding: 15px;
      }
      .tab{
        display: flex;
      }
      .tab li{
        padding: 10px;
      }
      .layout{
        height: 30px;
        line-height: 30px;
        overflow: hidden;
      }
      .layout div{
        margin: 10px 0;
      }
      .active{
        color: #42b983;
        font-weight: 700;
        border-bottom: 2px solid #42b983;
      }
    </style>
    <!-- tabPage.vue -->
    <template>
      <div>
        {{content}}
      </div>
    </template>
    
    <script>
    export default {
      name: 'tabPage',
      props: {
        params: {
          type: Object,
          default: () => {
            return {}
          }
        }
      },
      data () {
        return {
          content: ''
        }
      },
      watch: {
        params: {
          handler: function(newVal, oldVal){
            console.log('newVal-1', newVal)
            this.content = newVal.msg
          },
          deep: true,
          immediate: true
        }
      }
    }
    </script>

     vue 动态绑定 class 常见方式

    展开全文
  • 1.首先在VUE.JS中引用我们写好的VUE视图对象 2.接下来在HTML部分去使用我们引用的组件 MissionRecordOverviewPanel, PullableListContentPanel 这里要注意,在HTML部分中引用组件的命名规则要从PascalCase(首...

    1.首先在VUE.JS中引用我们写好的VUE视图对象

    2.接下来在HTML部分去使用我们引用的组件

    MissionRecordOverviewPanel, PullableListContentPanel

    这里要注意,在HTML部分中引用组件的命名规则要从PascalCase(首字母大写的驼峰命名法)→kebab-case(短横线分隔命名),这是VUE的规定,否则无法引用组件,例如:

    MissionRecordOverviewPanel → mission-record-overview-panel

    3.下面放上代码HTML代码部分

        <pullable-list-content-panel
          :data="entities"
          @onMoreLoading="handleMoreLoading"
          @onRefreshLoading="handleRefreshLoading"
        >
          <template slot-scope="row">
            <!-- slot 是子组件向父组件传值的途径 带冒号的是表达式 不带冒号的是纯文本 -->
            <!--suppress JSUnresolvedVariable -->
            <mission-record-overview-panel
              :title="`${row.index + 1} - ${row.entity.part_key} 的点检记录`"
              :message=row.entity.generated_date
              :style="panelStyle(row.index)"
              @onCheck="showPopup(row.entity)"
              @onError="showPopup(row.entity)"
            />
          </template>
        </pullable-list-content-panel>

    这样就可以显示引用视图的内容了

     

    展开全文
  • 建一个home.vue 文件<template>内容如下: <template> <div id='home'> <bar bartitle="our bar" barurl="/test" /> <!-- 使用了一个bar 组件,且还向组件传了两个值--> </div...

    下面的demo是安装了vue-cli脚手架建立项目,按项目默认路径做的。

     1、建一个home.vue 文件<template>内容如下:

    路径src/ 或者 src/下的其他路径都行,要通过浏览器IP端口访问过来,后续还要定义路由(在第3点)

    <template>
    <div id='home'>
        <bar bartitle="this is a title" barurl="/test" />
        <!-- 使用了一个bar 组件,且还向组件传了两个值-->
    </div>
    </template>
    <script>
    <!-- 正常使用组件,需要导入组件,并进行注册-->
    import topbar from '@/components/topbar.vue'
    export default {
      data(){
          return{
          };
      },
      components:{
          // 组件注册  组件名:导入组件包名  如果导入组件名与使用组件名一致,则直接写成 bar 即可
          'bar':topbar 
      }
    }
    </script>

    2、组件 topbar.vue,对应路径和上面组件注册路径一致,/components/topbar.vue

    <template>
        <div id='top'>
          <h1>{{ bartitle }}</h1>
          <h1><a :href="barurl" >to the test page</a><h1>
          <!-- 点击这个链接,就会进入到 127.0.0.1:8080/test 如果定义了这个路由,将进入到指定组件页面 -->
    <!-- barurl 就是通过home.vue的点击传过来的/test -->
          <!-- 通过点击路由链接,将会展示指定路由内容到下面的router-view -->
          <router-link to="/test/a">routerTestA</router-link>
          <!-- 添加路由视图 如果有多个路由视图需要添加name用于区分 -->
          <router-view name="childA"></router-view>
    
        </div>
    </template>
    
    <script>
    export default {
        name:"topbar",
        // 通过props获取父组件传递过来的值  props多种写法
        // props:['bartitle','barurl'] 
        props:{
            bartitle:String,
            barurl:String
        }
    }
    </script>

    这样,实际展示的home.vue就其实导入了topbar.vue的内容。再建一个test.vue,点击“to the test page”就能通过路由配置链接到test.vue去。

    为了

    (1)能通过地址127.0.0.1:8080/ 或者127.0.0.1:8080/home访问到页面

    (2)能使上面topbar组件的“to the test page”能正常链接到127.0.0.1:8080/test

    还需要定义路由

    3、定义路由

    src下面有个默认的main.js,内容如下,是将router路径下的全部文件均导入进来作为路由

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

     router下面又有个默认的index.js定义了路由,那么,要能够访问到上面两个地址,index.js 可以改写demo如下

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/home.vue'// 导入home.vue 导入有多种方式,这是其一
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',// 通过根路径访问 
        name: 'home',
        component:home
      },
      {
        path: '/test',// 通过/test访问  
        name: 'test',
        component: () => import('../views/test.vue') //导入test.vue 这样写也可以导入
        // 还可以设置子路由,嵌套在
        children:[{
          path: '/test/a',
          components: {childA:test}// 如果存在多个路由视图,最好绑定路由视图名称childA
      }
      ,
      {
        path: '/home',// 通过/home访问 
        name: 'home',
        component:home
      }
      
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

    demo就这样完成。。。

    关于子路由,可以看看这篇

    https://blog.csdn.net/weixin_45122120/article/details/109177240

    展开全文
  • vue 3.0的components.ts

    2021-03-04 02:17:38
    type:vnode.type, props:{}, attrs:{}, slots:{}, setupState:{}, //如果setup返回一个对象,这个对象会作为setUpstate ctx:{}, isMounted:false, //表示这个组件是否挂载过 render:null } instance.ctx={_:...
    export function createComponentInstance(vnode){
        const instance={
            vnode,
            type:vnode.type,
            props:{},
            attrs:{},
            slots:{},
            setupState:{},    //如果setup返回一个对象,这个对象会作为setUpstate
            ctx:{},
            isMounted:false,   //表示这个组件是否挂载过
            render:null
        }
    
        instance.ctx={_:instance}
    
        // props 和attrs 有什么区别?vnode.props中是包含props和attrs
        // webcomponent 组件需要有属性,插槽
        return instance;
    }
    
    export function setupComponent(instance){
        //
        const {props,children}=instance.vnode;   //type,props,children
    
        //根据props解析出props和attrs 将其放到instance上
        instance.props=props;    //initProps()
        instance.children=children;  //插槽的解析  initSlot()
    
        //需要先看一下  当前组件是不是有状态的组件,函数组件
        let isStateful=instance.vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONEENT
    
        if (isStateful){   //表示现在是一个带状态的组件
            //调用当前实例的setup方法,用setup的返回值 填充setupState和对应的render方法
            setupStatefulComponent(instance);
        }
    
    }
    
    function setupStatefulComponent(instance){
        //代理  传递给render函数的参数
    
        //2.获取组件的类型,拿到组件setup方法
        let {Component}=instance.type;
        let {setup}=Component;
    
        let setupContext=createContext(instance);
        setup(instance.props,setupContext);
    }
    
    function createContext(instance){
        return {
            attrs:instance.attrs,
            slots:instance.slots,
            props:instance.props,
            emit:()=>{},
            expose:()=>{}
        }
    }

     

    展开全文
  • 在写自定义属性时经常会加入’-‘来进行分词,比如:here-is,在props里必须用小驼峰式写法props:[‘hereIs’],尽量少用这种连字符的写法自定义属性。 <!DOCTYPE html> <html lang="en"> <head>...
  • vue3.0中新推出一个方法是 is 绑定,主要是绑定动态组件的。页面上只需要: <component :is="变量"></component> vue3.0官网入口 目录: 动态组件(用is绑定的) 实现效果: 实现步骤: 1、...
  • vue3 is动态组件

    千次阅读 2021-04-20 16:45:57
    vueis 属性简单说 就是扩展 html标签的限制 什么是动态组件: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。 动态切换:(:is后面的是对应的组件名,必须一致) 在...
  • Vue动态组件 / Vueis属性的作用 动态组件 模拟官网例子的实现 特殊的is属性 is属性的其他用法 DOM解析时的元素限制: 动态组件 针对于同一个组件挂载点,多个组件可以动态的切换,称为动态组件。 下面是 官方文档 ...
  • 重学Vue Components

    2021-02-12 10:52:25
    完成一个企业级项目后,发现自己对Vue Component使用的不够通透,想重学一遍才有了这篇博客; 需要的前置知识:ES6,Vue组件基础知识 一,组件注册 组件名 注册组件时,需要给它一个名字。比如在全局注册的时候我们...
  • 用来展示组件的名称is和component联用哈vue提供了component来展示对应的组件名称compont是一个占位符,is这个属性,用来展示对应的组件名称三个子组件我是登录组件我是注册组件遇见问题##在某个页面中使用组件##登录...
  • 什么是组件?在说之前我们先搞清楚什么是组件?...在有些情况下,组件也可以是原生元素的形式,以is特性进行扩展。怎么使用组件?说道这里,组件是什么,我们都有了清楚的了解,但是怎么使用呢?首先,...
  • vue react中使用Web Components组件

    千次阅读 2021-03-08 15:47:53
    /** * 处理react tsx中直接使用web components报错问题 */ interface UserCardModuleProps extends React.DetailedHTMLProps, HTMLElement> { title: string, ... } declare global { namespace JSX { interface ...
  • 则需要使用 :is 属性进行绑定切换 <template> <div class="dashboard-container"> <component :is="currentRole"/> </div> </template> <script> import { mapGetters } f
  • Vueis属性

    2020-12-20 11:24:51
    我们看一个切换标签的例子: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...script src="../vue202012/vue.js"></scri
  • Vue动态组件(:is

    2021-07-25 14:06:15
    元素,动态地绑定到它的 is 特性,可以实现动态组件 1、基础用法 <div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></component> <...
  • 事件的native修饰符只能在组件上使用,原生的html标签是不能使用的,这是因为我在div标签使用了native...可以理解为该修饰符的作用就是:把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有...
  • component :is="currentRole" /> </div> </template> <script> import { mapGetters } from 'vuex' import adminDashboard from './admin' import editorDashboard from './edit
  • <template> <div> <div id="nav"> <ul> <li @click="onCompChange('CompA')">第一个组件</li> <li @click="onCompChange('CompB')">第二个组件<... &
  • 创建项目的过程我就详细描述了,直接从element plus 的引入说起 一、按照官网的三种方式引入 element ...const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = requir..
  • Vueis属性的使用

    2021-03-09 09:07:52
    Vueis属性的使用 前言: 在读官方文档的时候看到了is属性,现对其做总结 用法一:动态的切换组件 <div id="app"> <button @click="changeComponent('component1')">组件1</button> <button...
  • components 里面是组件 注册组件并引入 <template> <view> <view class="the-home"> <div @click="getCom">点击</div> <!-- 组件的动态切换 --> <component :...
  • 记下vuepress引入外部组件后build报错问题 最近博客中集成了vue-qr组件用于生成访问的二维码. # 组件安装 npm install vue-qr# 自定义组件代码 Qrcode.vue <template> <div class="vue-qrcode-box"> &...
  • 我就废话不多说了,大家看代码吧~ {{msg}} {{msg}} {{msg}} 补充知识:详解vue组件的is特性:限制元素&动态组件 在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像...
  • 提示:The "Modal" component has been registered but not used. “模态”组件已注册但... 是由于eslint严格语法问题导致 在 .eslintrc.js文件中 找到rules 添加"vue/no-unused-components": "off" 保存即可 ...
  • 【不完全翻译系列】有些时候vue的响应机制并不起作用(注:vue官网文档 注意事项),这个时候我们需要强制vue组件重新渲染,也或许你可以删掉当前的组件重新创建一个新组件。所以,如何才能正确地让组件重新渲染?最好...
  • component v-for="(item,index) in compList" :is="item.path" :key="index" ></component> </div> <scipt> //在component.js我们可以先注册需要的组件进去,或者在mian.js里面统一注入 import ...
  • 报错: Vue页面 moment is not defined 报错404 二. 现象: 引入moment.js插件后, 过滤器失效, 前端页面无法识别 三. 原因: 网关微服务也要添加一份 static/js/moment.min.js 所有请求都是访问网关, 再转发到相应...
  • I am getting a lot of Vue warnings saying $listeners is readonly or $attrs is readonly and related to different Bootstrap items or to .For example:[Vue warn]: $attrs is readonly.found in--->...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,584
精华内容 10,633
关键字:

vue的components的is

vue 订阅