vue组件定义，全局、局部组件，配合模板及动态组件功能示例

2024-09-27 06:11:12

本文实例讲述了vue组件定义，全局、局部组件，配合模板及动态组件功能。分享给大家供大家参考，具体如下：

一、定义一个组件

定义一个组件:

1. 全局组件

var Aaa=Vue.extend({
 template:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);

*组件里面放数据:

data必须是函数的形式，函数必须返回一个对象(json)

2. 局部组件

放到某个组件内部

var vm=new Vue({
 el:'#box',
 data:{
  bSign:true
 },
 components:{ //局部组件
  aaa:Aaa
 }
});

1. 全局组件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
 <style>
 </style>
</head>
<body>
 <div id="box">
  <aaa></aaa>
 </div>
 <script>
  var Aaa=Vue.extend({
   template:'<h3>我是标题3</h3>'
  });
  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="https://cdn.bootcss.com/vue/2.4.4/vue.min.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="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
 <div id="box">
  <aaa></aaa>
 </div>
 <script>
  var Aaa=Vue.extend({
   //组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)
   data(){
    return {
     msg:'我是标题^^'
    };
   },
   methods:{
    change(){
     this.msg='changed'
    }
   },
   template:'<h3 @click="change">{{msg}}</h3>'
  });
  Vue.component('aaa',Aaa);//放在这里是全局
  var vm=new Vue({
   el:'#box',
   data:{
    bSign:true
   }
  });
 </script>
</body>
</html>

2. 局部组件

放到某个组件内部

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
 <style>
 </style>
</head>
<body>
 <div id="box">
  <aaa></aaa>
  <br/>
  <br/>
  <my-aaa></my-aaa>
 </div>
 <script>
  var Aaa=Vue.extend({
   template:'<h3>{{msg}}</h3>',
   data(){
    return {
     msg:'ddddd'
    }
   }
  });
  var vm=new Vue({
   el:'#box',
   data:{
    bSign:true
   },
   components:{ //局部组件
    aaa:Aaa,
    'my-aaa':Aaa//这里的my-aaa需要用引号
   }
  });
 </script>
</body>
</html>

另外一种写法，局部

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.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:'<h2 @click="change">标题2->{{msg}}</h2>'
    }
   }
  });
 </script>
</body>
</html>

二、配合模板

配合模板:

1. template:'<h2 @click="change">标题2->{{msg}}</h2>'

2. 单独放到某个地方

a).

<script type="x-template" id="aaa">
 <h2 @click="change">标题2->{{msg}}</h2>
</script>

b).

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

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
 <style>
 </style>
</head>
<body>
 <div id="box">
  <my-aaa></my-aaa>
 </div>
 <script type="x-template" id="aaa">
  <h2 @click="change">标题2->{{msg}}</h2>
  <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>Document</title>
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
 <style>
 </style>
</head>
<body>
 <div id="box">
  <my-aaa></my-aaa>
 </div>
 <template id="aaa">
  <h1 @click="change">{{msg}}</h1>
  <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 title';
      }
     },
     template:'#aaa'
    }
   }
  });
 </script>
</body>
</html>

三、动态组件

动态组件:

<component :is="组件名称"></component>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.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>
  <!--<component :is="组件名称"></component>-->
 </div>
 <script>
  var vm=new Vue({
   el:'#box',
   data:{
    a:'aaa'
   },
   components:{
    'aaa':{
     template:'<h2>我是aaa组件</h2>'
    },
    'bbb':{
     template:'<h2>我是bbb组件</h2>'
    }
   }
  });
 </script>
</body>
</html>

运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta
详解vue.js全局组件和局部组件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app">  <my-component></my-compo
Vue单文件组件基础模板小结

背景相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中我暂时就想到这两点,童鞋们可以在评论里帮我补充:因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用 <template> <div> <h1>{{title}}</h1> <ChildComponents></
vuejs动态组件给子组件传递数据的方法详解

通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s
详解Vue.use自定义自己的全局组件

通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-simple这个简单版本的脚手架为例,安装就不啰嗦了,直接进入正题首先看下目前的项目结构: webpack首先会加载main.js,所以我们在main的js里面引入.我以element ui来做对比说明 import Vue from 'vue' import App from './App.vue'
Vue.js动态组件解析

本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: 改变挂载的组件,
vue全局组件与局部组件使用方法详解

vue全局/局部注册,以及一些混淆的组件 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> -main.js文件 **main.js入口文件的内容** import Vue from 'vue' import App from './App' import router from './router' // 引入公用组件的vue文件他暴漏的
vue的全局提示框组件实例代码

这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示: <template>  <div v-show="visible" class="dialog-tips dialog-center"> <div>{{message}}</div> </div> </template> <script> export default { data
Vue 自定义动态组件实例详解

现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件. 举第一个栗子用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下: 接下来我们要在默认的main.js里将刚刚写的index.js
Vue.js的动态组件模板的实现

组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么. 评论现在不再仅仅是简单的文本字段.您希望能够发布链接,上传图像,集成视频等等.必须在此注释中呈现所有这些完全不同的元素.如果你试图在一个组件内执行此操作,它很快就会变得非常混乱. 处理方式我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件.像这样的东西: <templat
Vue组件之全局组件与局部组件的使用详解

组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展.个人认为就是一个可以重复利用的结构层代码片段. 全局组件注册方式:Vue.component(组件名,{方法}) eg: <body> <div id="app"> <my-component>&l

vue组件定义，全局、局部组件，配合模板及动态组件功能示例

相关推荐

随机推荐