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,)   //执行这个方法，告诉父组件 把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/>'

})

然后可以在其他组件中引用

如何改变仓库的值呢？

第一种方法：

在点击事件中添加这样的一句话 , 意思是触发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>