Vue创建组件的方式

使用Vue.Extend()和Vue.component全局注册组件

首先我们定义一个组件并接收

       var com1 =Vue.extend({template:"<h3>这是通过Vue.extend创建的组件</h3>"});
复制代码

然后我们全局注册这个组件

        Vue.component('mycom1',com1);
复制代码

这样我们就可以在我们的代码中使用我们的mycom1组件了

        <div id="app"><mycom1></mycom1></div>
复制代码

需要注意的是，如果我们注册的组件名称是以驼峰命名法来命名的，那么我们在使用的时候将不能使用原本注册时的命名，如下的写法时错误的

//定义
Vue.component('myCom1',com1);//使用<div id="app"><myCom1></myCom1></div>
复制代码

我们在使用的时候需要将驼峰命名法的两个单词使用‘-’进行分开，并且更加推荐‘-’左右两端的单词均使用小写，如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="lib/vue-2.4.0.js" ></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script><link rel="stylesheet" href="lib/bootstrap-3.3.7.css" /></head><body><div id="app"><my-com1></my-com1></div><script>var com1 =Vue.extend({template:"<h3>这是通过Vue.extend创建的组件</h3>"});Vue.component('myCom1',com1);var vm = new Vue({el:'#app',data:{}})</script></body>
</html>
复制代码

同时我们可以将构造和注册结合在一起

       Vue.component('myCom1',Vue.extend({template:"<h3>这是通过Vue.extend创建的组件</h3>"}));
复制代码

更加简化的方式

     Vue.component('myCom1',{template:"<h3>这是通过Vue.extend创建的组件</h3>"});
复制代码

需要注意的是，我们不管使用哪种方式来定义组件，template中定义的顶级元素只能有一个，否则会出现错误

使用Vue.component()配合Vue的templete标签来定义组件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="lib/vue-2.4.0.js" ></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script><link rel="stylesheet" href="lib/bootstrap-3.3.7.css" /></head><body><div id="app"><my-com1></my-com1></div><template id="mycom2"><h3>这是通过Templete定义的组件，在html代码中有智能提示</h3></template><script>Vue.component('myCom1',{template:"#mycom2"});var vm = new Vue({el:'#app',data:{}})</script></body>
</html>
复制代码

需要注意的是，上述的定义方式都是定以的全局Vue对象均可使用，下面我们定义一个私有的组件

Vue.component私有组件

Vue对象内部有一个components组件，可以定义我们想要的组件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="lib/vue-2.4.0.js" ></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script><link rel="stylesheet" href="lib/bootstrap-3.3.7.css" /></head><body><div id="app"><login></login></div><script>var vm = new Vue({el:'#app',data:{},components:{login:{template:'<h3>这是私有的login组件</h3>'}}})</script></body>
</html>
复制代码

同时仍然可以使用上述的template方式来定义组件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="lib/vue-2.4.0.js" ></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script><link rel="stylesheet" href="lib/bootstrap-3.3.7.css" /></head><body><div id="app"><login></login></div><template id="app2"><h3>这是私有组件配合template方式定义的组件</h3></template><script>var vm = new Vue({el:'#app',data:{},components:{login:{template:'#app2'}}})</script></body>
</html>
复制代码

组件的data

定义的组件可以有自己的data数据域，但是data必须为一个function且必须返回一个对象格式的数据，除此之外和Vue对象中的data的使用方法完全一致

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="lib/vue-2.4.0.js" ></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script><link rel="stylesheet" href="lib/bootstrap-3.3.7.css" /></head><body><div id="app"><login></login></div><template id="app2"><h3>这是私有组件配合template方式定义的组件---{{msg}}</h3></template><script>var vm = new Vue({el:'#app',data:{},components:{login:{template:'#app2',data:function(){return {msg:"这是组件中的数据"}}}}})</script></body>
</html>复制代码

组件切换

使用v-if和v-else实现组件切换

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="lib/vue-2.4.0.js" ></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script><link rel="stylesheet" href="lib/bootstrap-3.3.7.css" /></head><body><div id="app"><a href="#" @click.prevent="flag=true">登录</a><a href="#" @click.prevent="flag=false">注册</a><login v-if="flag"></login><register v-else="flag"></register></div><template id="app2"><h3>这是登录组件</h3></template><script>var vm = new Vue({el:'#app',data:{flag:true},components:{login:{template:'#app2',},register:{template:'<h3>注册组件</h3>',}}})</script></body>
</html>复制代码

不过使用这种方式只能实现两种类型的组件切换

使用component元素进行组件切换

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="lib/vue-2.4.0.js" ></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script><link rel="stylesheet" href="lib/bootstrap-3.3.7.css" /></head><body><div id="app"><a href="#" @click.prevent="comName='login'">登录</a><a href="#" @click.prevent="comName='register'">注册</a><component :is="comName"></component></div><template id="app2"><h3>这是登录组件</h3></template><script>var vm = new Vue({el:'#app',data:{comName:'login'},components:{login:{template:'#app2',},register:{template:'<h3>注册组件</h3>',}}})</script></body>
</html>
复制代码

我们使用定义在data中的属性来切换component中要展示的组件，使用:is来代表最后要展示的组件的值

父子组件传值

父组件向子组件传递数据

子组件默认无法直接访问到父组件（对象）中的数据，需要使用v-bind表达式来传递，结合组件的props属性来使用，即可达到父组件向子组件传递数据

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="lib/vue-2.4.0.js" ></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script><link rel="stylesheet" href="lib/bootstrap-3.3.7.css" /></head><body><div id="app"><login v-bind:parentmsg="msg"></login></div><template id="app2"><h3>这是私有组件配合template方式定义的组件--{{parentmsg}}</h3></template><script>var vm = new Vue({el:'#app',data:{msg:"这是父组件中的数据"},components:{login:{template:'#app2',data(){return {name:'zhangsan',age:'24'}},props:['parentmsg']}}})</script></body>
</html>复制代码

需要注意的是，通过props传递过来的数据是不推荐被修改的，强行修改会报错

props中定义的属性全部都是由父组件传递给子组件的

而子组件data中的数据是组件私有，可以被修改的

子组件向父组件传递数据

子组件向父组件传值是通过父组件向子组件传递事件实现的

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="lib/vue-2.4.0.js" ></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script><link rel="stylesheet" href="lib/bootstrap-3.3.7.css" /></head><body><div id="app"><login @func="show"></login></div><template id="app2"><input type="button" value="子组件按钮" @click="myclick" /></template><script>var vm = new Vue({el:'#app',data:{msg:"这是父组件中的数据"},methods:{show(data){console.log("这是父组件的事件"+data)}},components:{login:{template:'#app2',data(){return {name:'zhangsan',age:'24'}},props:['parentmsg'],methods:{myclick(){this.$emit('func',this.name);}}}}})</script></body>
</html>
复制代码

从如上代码可知，父组件调用子组件中的数据需要借助this.$emit来进行传递，传递的第一个参数都是函数名，后面的参数都是传递的数据，可以传递单个属性或者是对象

转载于:https://juejin.im/post/5b7a02226fb9a019bc653318

Vue组件创建和组件传值相关推荐

【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )
文章目录一.StatefulWidget 组件二.创建 StatefulWidget 组件三.MaterialApp 组件四.Scaffold 组件五. 相关资源一.StatefulWid ...
自定义组件--创建mxml组件
创建简单的mxml组件 Example components/CountryComboBox.mxml <?xml version="1.0" encoding=" ...
vue怎么自己创建组件并引用_Vue 实现创建全局组件,并且使用Vue.use() 载入方式
自定义vue组件,一般是局部引用的方式载入,使用的时候,在应用的组件中使用 import moduleName from 'module' 导入,在components中注册 {{info.title ...
Vue创建自定义组件，并详解整个创建自定义组件的过程
在vue开发项目中想自定义一个自己的组件,于是在网上找一下教程,教程基本的都一样,但是都不是很详细,我就按照网上的教程从头到尾学习了一遍,文章中如果有不正确的,还请各位大佬指出,共同进步. vue自定 ...
vue方法传值到data_Vue组件创建和传值的方法
## 创建组件的3种方法 # 第一种: + Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项 + Vue.component()函数利用Vue.ex ...
vue组件的基本使用，以及组件之间的基本传值方式
组件(页面上的每一个部分都是组件) 1.三部分:结构(template),样式(style),逻辑(script) 2.组件的作用:复用 3.模块包含组件 4.组件创建: 1.全局组件:Vue.com ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
【Vue】父子组件的传值（父组件--＞子组件、子组件--＞父组件）
父组件传值给子组件 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
41. Vue组件传值-父组件向子组件传值
前言前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...

Vue组件创建和组件传值