广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >vue19如何组建Vue.extend component、组件模版、动态组件
  • 955

0
分享到

vue19如何组建Vue.extend component、组件模版、动态组件

2024-04-02 19:04:59 955人浏览 安东尼
摘要

这篇文章主要介绍Vue19如何组建Vue.extend component、组件模版、动态组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体代码如下所示：<!DOCTYPE

这篇文章主要介绍Vue19如何组建Vue.extend component、组件模版、动态组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
  </div>
  <script>
    var Aaa=Vue.extend({//继承出来一个Vue类Aaa
      template:'<h4>我是标题3</h4>'
    });
    var a=new Aaa();//a跟vm一样
    console.log(a);
    var vm=new Vue({
      el:'#box',
      data:{
        bSign:true
      }
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>
  <script>
    var Aaa=Vue.extend({
      template:'<h4>我是标题3</h4>'
    });
    Vue.component('aaa',Aaa);//aaa是组建实例，全局组件
    var vm=new Vue({
      el:'#box',
      data:{
        bSign:true
      }
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>

  <script>
    var Aaa=Vue.extend({
      data(){
        return {
          msg:'我是标题^^'
        };
      },
      template:'<h4>{{msg}}</h4>'
    });

    Vue.component('aaa',Aaa);


    var vm=new Vue({
      el:'#box',
      data:{
        bSign:true
      }
    });

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>

  <script>
    var Aaa=Vue.extend({
      data(){
        return {
          msg:'我是标题^^'
        };
      },
      methods:{
        change(){
          this.msg='changed'
        }
      },
      template:'<h4 @click="change">{{msg}}</h4>'
    });

    Vue.component('aaa',Aaa);


    var vm=new Vue({
      el:'#box',
      data:{
        bSign:true
      }
    });

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>

  <script>
    var Aaa=Vue.extend({
      template:'<h4>{{msg}}</h4>',
      data(){// es6语法，函数不写：，组件里面放数据: data必须是函数的形式，函数必须返回一个对象(JSON)
        return {
          msg:'DDDdd'
        }
      }
    });


    var vm=new Vue({
      el:'#box',
      data:{
        bSign:true
      },
      components:{ //局部组件，放到某个组件内部，Vue.component('aaa',Aaa);
        aaa:Aaa
      }
    });

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <my-aaa></my-aaa>
  </div>
  <script>
    var Aaa=Vue.extend({
      template:'<h4>{{msg}}</h4>',
      data(){
        return {
          msg:'ddddd'
        }
      }
    });
    var vm=new Vue({
      el:'#box',
      data:{
        bSign:true
      },
      components:{ //局部组件
        'my-aaa':Aaa
      }
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <my-aaa></my-aaa>
  </div>
  <script>
    Vue.component('my-aaa',{//全局，公共的提出去
      template:'<strong>好</strong>'
    });
    var vm=new Vue({
      el:'#box'
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <my-aaa></my-aaa>
  </div>
  <script>
    var vm=new Vue({
      el:'#box',
      components:{ //局部
        'my-aaa':{
          data(){
            return {
              msg:'welcome vue'
            }
          },
          methods:{
            change(){
              this.msg='changed';
            }
          },
          template:'<h3 @click="change">标题2->{{msg}}</h3>'
        }
      }
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <my-aaa></my-aaa>
  </div>

  <template id="aaa">
    <h2>标题1</h2>
    <ul>
      <li v-for="val in arr">
        {{val}}
      </li>
    </ul>
  </template>

  <script>
    var vm=new Vue({
      el:'#box',
      components:{
        'my-aaa':{
          data(){
            return {
              msg:'welcome vue',
              arr:['apple','banana','orange']
            }
          },
          methods:{
            change(){
              this.msg='changed';
            }
          },
          template:'#aaa'
        }
      }
    });

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <my-aaa></my-aaa>
  </div>

  <script type="x-template" id="aaa">
    <h3 @click="change">标题2->{{msg}}</h3>
    <ul>
      <li>1111</li>
      <li>222</li>
      <li>3333</li>
      <li>1111</li>
    </ul>
  </script>

  <script>
    var vm=new Vue({
      el:'#box',
      components:{
        'my-aaa':{
          data(){
            return {
              msg:'welcome vue'
            }
          },
          methods:{
            change(){
              this.msg='changed';
            }
          },
          template:'#aaa'
        }
      }
    });

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态组件</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <input type="button" @click="a='aaa'" value="aaa组件">
    <input type="button" @click="a='bbb'" value="bbb组件">
    <component :is="a"></component> <!-- 动态组件-->
  </div>

  <script>
    var vm=new Vue({
      el:'#box',
      data:{
        a:'aaa'
      },
      components:{
        'aaa':{
          template:'<h3>我是aaa组件</h3>'
        },
        'bbb':{
          template:'<h3>我是bbb组件</h3>'
        }
      }
    });

  </script>
</body>
</html>

下面看下vue component动态组件

 动态组件

通过component标签 的is属性来进行组件的切换

is的属性值决定要显示的组件，所以将is的属性值设置为data中的值，以便于动态变化

<template>
  <div class="app">
      <component :is="组件名称">
 
      </component>
  </div>
</template>

以上是“vue19如何组建Vue.extend component、组件模版、动态组件”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网VUE频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue19如何组建Vue.extend component、组件模版、动态组件

本文链接: https://www.lsjlt.com/news/74770.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • vue19如何组建Vue.extend component、组件模版、动态组件
    这篇文章主要介绍vue19如何组建Vue.extend component、组件模版、动态组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体代码如下所示：<!DOCTYPE...
    99+
    2022-10-19
  • vue3中通过遍历传入组件名称动态创建多个component组件
    目录背景解决问题原因：背景 在 vue3 中，如果使用 component，可以动态加载一个组件，例如 <!-- 直接创建 --> <component :i...
    99+
    2023-03-23
    vue3动态创建多个component 组件 vue3 component 组件
  • Angular如何根据组件名称动态创建组件
    这篇文章主要介绍Angular如何根据组件名称动态创建组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、理解angular组件组件是一种特殊的指令，使用更简单的配置项来构建基于组...
    99+
    2022-10-19
  • vue3中怎么通过遍历传入组件名称动态创建多个component组件
    这篇文章主要介绍“vue3中怎么通过遍历传入组件名称动态创建多个component组件”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue3中怎么通过遍历传入组件名称动态创建多个component组...
    99+
    2023-07-05
  • vue3如何使用defineAsyncComponent与component标签实现动态渲染组件
    本篇内容介绍了“vue3如何使用defineAsyncComponent与component标签实现动态渲染组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅...
    99+
    2023-07-06
  • Vue组件模版如何自定义
    本篇内容介绍了“Vue组件模版如何自定义”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！字符串形式Vue 最简单直接的一种定义组件模版的方式，...
    99+
    2023-07-04
  • vue动态组件如何使用
    这篇文章主要介绍“vue动态组件如何使用”，在日常操作中，相信很多人在vue动态组件如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue动态组件如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧...
    99+
    2023-06-29
  • vue3动态组件如何使用
    这篇“vue3动态组件如何使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue3动态组件如何使用”文章吧。问题：为什么v...
    99+
    2023-07-05
  • Vue 3.0 中如何使用动态组件
    这篇文章给大家介绍Vue 3.0 中如何使用动态组件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。一、组件注册1.1 全局注册在 Vue 3.0 中，通过使用 app 对象的 comp...
    99+
    2022-10-19
  • vue如何动态加载组件详解
    目录使用场景：需要动态导入组件的页面核心组件的代码：使用场景：总结使用场景： 项目中需要我们根据不同的业务需求呈现不同的业务场景，如果业务类型简单还好，直接全部引入判断即可，但随着我...
    99+
    2022-11-13
    vue 组件动态加载 vuejs动态加载组件 vue 加载组件
  • vb.net如何实现动态控件数组
    这篇文章主要介绍vb.net如何实现动态控件数组，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！VB.NET控件数组问题1、在form的头部定义一个公共的ArrayList类型的变量Dim m_items As New...
    99+
    2023-06-17
  • 如何动态创建Angular组件实现popup弹窗功能
    这篇文章主要为大家展示了“如何动态创建Angular组件实现popup弹窗功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何动态创建Angular组件实现p...
    99+
    2022-10-19
  • vue3的动态组件是如何工作的
    目录一、组件注册 1.1 全局注册 1.2 注册全局组件的过程 1.3 应用挂载的过程 二、动态组件 2.1 绑定字符串类型 2.2 绑定对象类型 三、阿宝哥有话说 3.1 除了 c...
    99+
    2022-11-11
  • angular9中如何实现组件动态加载
    这篇文章将为大家详细讲解有关angular9中如何实现组件动态加载，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。指令的创建在添加组件之前，先要定义一个锚点来告诉 Angular 要把组件插入到什么地方。 ...
    99+
    2023-06-14
  • Vue如何通过JSX动态渲染组件
    这篇文章主要介绍“Vue如何通过JSX动态渲染组件”，在日常操作中，相信很多人在Vue如何通过JSX动态渲染组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue如何通过JSX动态渲染组件”的疑惑有所帮助！...
    99+
    2023-07-04
  • vue如何给组件动态绑定不同的事件
    目录vue给组件动态绑定不同的事件场景vue组件绑定事件无效下面提供两者方法，可以任选其一vue给组件动态绑定不同的事件 场景 根据用户配置的事件动态绑定。也就是用户可以动态选择配置...
    99+
    2022-11-13
    vue组件 动态绑定事件 vue动态绑定
  • Angular懒加载动态创建显示该模块下声明的组件
    目录环境: Angular 13.x.x新建一个angular项目懒加载工具栏组件toolbar.module.tstoolbar.component.tstoolbar.compo...
    99+
    2022-11-13
  • Vue中form表单动态如何添加组件
    这篇文章给大家分享的是有关Vue中form表单动态如何添加组件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果如下:这种效果实现其实就是对 v-for 指令的一种使用，组件不是...
    99+
    2022-10-19
  • Vue3动态组件如何进行异常处理
    这篇“Vue3动态组件如何进行异常处理”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue3动态组件如何进行异常处理”文章吧...
    99+
    2023-07-04
  • 如何使用form-create动态生成vue自定义组件和嵌套表单组件
    这篇文章主要介绍了如何使用form-create动态生成vue自定义组件和嵌套表单组件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。使用fo...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作