vue - vue-cli 基础属性 - for循环（二）

App.vue 文件：

router-view标签 的作用是会将其他页面 的 < template> 标签里的内容放在这个标签里，从而实现无刷新的路由跳转；

组件

1.0、按钮 props：

<template>
  <button class="qui-btn">
    <span>{{msg}}</span>
  </button>
</template>

<script>
  export default {
        data:function(){
            return {
                msg:'下载'
            }
        }
  }
</script>
<style scoped>
  @import './css/reset.import.css';
</style>

分析：
1.0、当 button 组件初始化时，msg 自定义属性会绑定到 {{msg}} 中， {{}} - 指模板化前端代码；
2.0、如果不是组件，正常的写法可以是 data: {msg: ‘下载’}，但是组件是会在多处地方引用到的，JS中直接共享对象会造成引用传递，也就是说修改了msg后所有按钮的msg都会跟着修改，所以这里用function来每次返回一个对象实例；	————
3.0、然后在页面中调用组件 ： < qui-btn msg=“确定” class=“small”></ qui-btn>

实现 3.0 需要，属性的接口暴露只需要写在prosp里面就可以：

<script>
  export default {
    props: {
      msg: {
        default: '下载'
      }
    }
  }
</script>

在组件中，props是专门用来暴露组件的属性接口的。

把属性写在props里面，就可以暴露给其他页面调用了；

---

2.0、按钮 slot 插入图片：

组件.vue 页面：

<template>
  <button class="qui-btn" v-on:click="btnClickEvent">
    <slot name="icon"></slot>          <!--重点在这里,引入图片-->
    <span>{{msg}}</span>
  </button>
</template>

关键字slot并赋予一个name值，页面引用：

<qui-btn msg="下载" class="with-icon">
  <img slot="icon" class="ico" src="xxx.png" />
</qui-btn>

分析：
1.0、img上有个关键字slot="icon" 对应组件中的 name="icon"，渲染的时候，会将img整个替换掉组件中的对应name的标签	————

---

3.0、for 循环：

v-for 关键字

<template>
  <div class="qui-nav nav-type-1">
    <!--关键代码 v-for  -->
    <a v-for="(item, index) in items" :class="[commonClass,item.active ? activeClass : '']" v-on:click="navClickEvent(items,index)" >         
      <span class="nav-txt">{{item.text}}</span>
    </a>
  </div>
</template>

<script>
  export default {
    data:function(){
      return {
        commonClass:'nav-item',
        activeClass:'active',
        items:[
          {
            text: '首页',
            active : true
          },
          {
            text: '列表',
            active : false
          },
          {
            text: '关于',
            active : false
          },
          {
            text: '招聘',
            active : false
          }
        ]
      }
    },
    methods:{
      navClickEvent:function(items,index){
        /*默认切换类的动作*/
        items.forEach(function(el){
          el.active = false;
        });
        items[index].active = true;
        /*开放用户自定义的接口*/
        this.$emit('navClickEvent',items,index);
      }
    }
  }
</script>

1、····················

拆分分析1：（v-for="(item,index) in items"）	数据循环部分
1.0、items是我们在data里面定义的对象
1.1、v-for="(item,index) in items" —— 暴露了 item 和 index 两个接口，这是Vue提供的	——————
2.0、代表 items 中的每一项 以及 该项对应的下标（注意是下标，也可自定义），接着我们就可以在标签中使用绑定｛｛item.text｝｝了
3.0、这里 data 用到了 function()

2、····················

拆分分析2 -（ :class="[commonClass,item.active ? activeClass : ‘’]" ）：	添加class
1.0、:class给组件绑定一个class属性（类似jQuery中的attr方法），这里的写法是缩写，它的全拼应该是v-bind:（又一个v-XXX写法）	——————
1.2、：class=XXX 和 class=XXX 的区别在于不带冒号的是静态的字符串绑定，带冒号的是动态的变量绑定
	——
2.0、给class绑定了一个数组，先看第一个元素 commonClass 变量，这个变量在data中定义，默认样式类’nav-item’
2.1、数组的第二个元素是JS的三目运算符 item.active?activeClass:''
2.1.1、意思是当每个item中的active值为true时，绑定activeClass变量对应的类，如果为false，则为空
2.2、最后的结果是当item.active为true时候，tab的class值为’nav-item active’，当为false，就只有’nav-item’

3、····················

拆分分析3：	添加点击事件
1.0、利用for循环给每个a标签绑定了一个click事件
2.0、对应methods中定义的navClickEvent，接收两个参数items和index	——————
3.0、当点击的时候，把items中的每个item.active置为false，把当前的tab的active值置为true，这样就可以动态切换active类了

this.$emit(‘navClickEvent’,items,index); - $emit（）为了触发父级的事件，因为方法挂载到了子组件上所以方法内的this指向的是子组件

其实它的作用就是触发自定义函数，也叫触发机制，父组件监听，子组件触发

引用方（父组件）就可以给不同子组件（引用组件页面）调用不同的事件处理了

<template>
  <div id="pageQuiNav">
    <qui-nav v-on:navClickEvent="dosth"></qui-nav>
  </div>
</template>

<script>
  import quiNav from '../components/quiNav.vue'
  export default {
    name: 'pageQuiNav',
    components: {
      'qui-nav': quiNav
    },
    methods:{
      dosth:function(items,index){
        console.log(items[index].text + index);
      }
      /* 调用不同的事件处理：
      methods: {
         doSth1: function(){
           alert('111');
         },
         doSth2: function(){
           alert('222');
         }
      }
      */
    }
  };
</script>

具体分析：

1、上面的代码在引用组件的时候，注册了一个事件，这个 navClickEvent 事件是之前我们在 导航组件 中绑定到 a标签 的click事件中的，然后在 引用组件页面我们给这个事件一个自定义的方法doSth，同时，在script中声明这个自定义的方法；
2、专业一点的说，$ emit() 这种做法叫做监听，由引用方（暂且叫做父组件）监听子组件的内置方法；同时在子组件中，需要触发这个事件，所以就有了组件中 this.$emit('navClickEvent',items,index); 这行代码；