vue基础篇---vue组件
vue模块第一篇，因为公司马上要用到这vue开发。早就想好好看看vue了。只有实际工作中用到才会进步最快。vue其他的简单指令就不多讲了，没啥意思，网上一大堆。看w3c就ok。
组件这个我个人感觉坑蛮多的，所以特地记录一下。
简单总结一下：
父组件给子组件传值：
父向子可以传属性，方法，和父对象的本身，很简单，需要2步即可。
1，父组件调用子组件的时候 绑定动态属性 <v-header :title="title" :homemsg='msg' :run="run" :home="this"></v-header> 分别是属性，方法，父本身
2，在子组件里面通过 props接收父组件传过来的数据 props:['title','homemsg','run','home'] js调用的时候就this.title即可 页面直接{{title}}即可
父组件主动获取子组件的数据和方法
1.调用子组件的时候定义一个ref <v-header ref="header"></v-header>
2.在父组件里面通过 this.$refs.header.属性 this.$refs.header.方法
子组件主动获取父组件的数据和方法
this.$parent.数据
this.$parent.方法
非父子组件传值 （利用广播实现的，麻烦，在项目中一般用vuex实现）
1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例VueEmit
2、在要广播的地方引入刚才定义的实例
3、通过 VueEmit.$emit('名称','数据')
4、在接收收数据的地方通过 $om接收广播的数据
VueEmit.$on('名称',function(){
})
全局组件
/*全局組件*/ 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
在子组件中如何引用父组件的方法
<div id="vue_det"> <child content="Dell" @click.native="xx"></child> <child content="Mark"></child> </div>
xx方法写在父组件的methods中。引用的时候用.native即可。 如果子组件本身有方法。会先执行子组件的方法，然后再执行父组件的方法。
卡槽
卡槽的作用：平常我们父组件给子组件传值，我们都用自定义属性的方式，然后在子组件中接收，但是，如果我们从父组件中传的值是html这种呢？难道还要这样写么？岂不是很蛋疼？虽然能做到，但是不够美观，而且还得转义。所以，我们需要卡槽这个特性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>卡槽</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="vue_det"> <child> <div slot="header">header</div> <!--header，footer是自定义的名字。方便子组件引用--> <div slot="footer">footer</div> </child> </div> <script type="text/javascript"> Vue.component('child',{ template:` <div> <slot name="header"></slot> <h1>主题</h1> <slot name="footer"></slot> </div> ` }) var vm = new Vue({ el: '#vue_det' }) </script> </body> </html>
利用vuex实现不同的组件之间传递数据
cnpm install vuex --save 安装
在项目中src下创建一个专门的文件夹存放vuex的store
src/store/index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //使用vuex插件 export default new Vuex.Store({ //创建仓库 state ：{
city:'北京'
}，
actions:{
changeCity(ctx,city){ // ctx 是上下文环境，必须调用commit来实现改变state中的值
ctx.commit('changeCity',city)
}
} mutations:{
changeCity(state,city){
state.city=city
}
} })
在main.js中引入
import store from './store' new Vue({ el: '#app', router, store, /把store加进根元素 components: { App }, template: '<App/>' })
然后可以在其他组件中引用
{{this.$store.state.city}}
如何改变仓库的值呢？
第一种方法：
在点击事件中添加这样的一句话 , 意思是触发changeCity事件，将city带过去 ，changeCity这个方法再vuex中写
this.$store.dispatch('changeCity',city)
第二种方法： 直接省略掉actions了，直接调用commit方法也是可以的。
this.$store.commit('changeCity',city)
循环递归组件
<template>
<div>
<div
class="item"
v-for="(item, index) of list"
:key="index"
>
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div v-if="item.children" class="item-chilren">
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailList',
props: {
list: Array
}
}
</script>
