vue组件
Posted coder-lzh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue组件相关的知识，希望对你有一定的参考价值。
vue模块第一篇，因为公司马上要用到这vue开发。早就想好好看看vue了。只有实际工作中用到才会进步最快。vue其他的简单指令就不多讲了，没啥意思，网上一大堆。看w3c就ok。
组件这个我个人感觉坑蛮多的，所以特地记录一下。
全局组件
/*全局組件*/ Vue.component("to-do",{ template:"<li>111</li>" })
这样就声明了一个全局组件，然后你在html中直接引用 <to-do></to-do> 这个你自定义的标签就ok。注意：一定要在你声明的el中引用。
问题1：全局组件如何引用变量呢？
<!--html中引用的全局組件 content这个属性是你自定义的 --> <to-do v-for="(item,index) in list" :key="index" :content="item"></to-do> /*全局組件*/ Vue.component("to-do",{ props:["content"], // props這個属性来声明接收变量 template:"<li>{{content}}</li>" })
问题2：子组件和父组件之间如何通信呢？
这里特别强调说明一下，每一个vue实例就是一个组件，每个组件都是vue实例。这里要清楚！！！
也就是说，你自定义一个组件，组件里面也可以也date，methods这类的属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="v1"> <button @click="add">提交</button> <!--html中引用的全局組件 content index 这2个属性是你自定义的 @del 是监听del这个自定义的事件，就执行hadleDelete这个方法--> <to-do v-for="(item,index) in list" :key="index" :content="item" :index="index" @del="hadleDelete"></to-do> </div> </body> <script type="text/javascript"> /*全局組件*/ Vue.component("to-do",{ props:["content","index"], // props這個属性来声明接收变量 template:"<li @click=‘click_li‘>{{content}}</li>", methods:{ click_li:function(){ this.$emit("del",this.index) //意思是点击子组件的li标签的话，会向外发布一条del事件。后面携带的值 } } }) new Vue({ el: "#app", data: { v1: "", list: [] }, methods: { add: function () { this.list.push(this.v1); this.v1 = ""; }, hadleDelete:function(index){ this.list.splice(index,1) //执行这个方法，告诉父组件 把list里面的数据删掉 } } }) </script> </html>
要清楚，父组件何如向子组件通信。子组件如何向父组件通信。
局部组件
<script type="text/javascript"> /*全局組件*/ Vue.component("to-do",{ template:"<li>111</li>" }) /*局部組件*/ var xixi={ template:"<li>xxxxx</li>" } new Vue({ el: "#app", components:{ xixi:xixi }, data: { v1: "", list: [] }, methods: { add: function () { this.list.push(this.v1); this.v1 = ""; } } }) </script>
他和全局组件的区别在于，全局可以直接引用，他不可以，如果想用，必须在自己new Vue（{}）中声明才可以。然后你在html中直接引用 <xixi></xixi> 这个你自定义的标签就ok
以上是关于vue组件的主要内容，如果未能解决你的问题，请参考以下文章