网络编程
位置：首页>> 网络编程>> JavaScript>> vue组件定义，全局、局部组件，配合模板及动态组件功能示例

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

作者：白杨-M　　发布时间：2024-05-05 09:09:59　

标签：vue,组件

本文实例讲述了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>

运行效果：

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

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

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

来源：https://www.cnblogs.com/baiyangyuanzi/p/6781420.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com