vue.js入门（二，引入组件）

安装 vue脚手架 vue-cli npm install -g vue-cli 注意这里是2.x版本 3.x后面再讲

这里的话 是否安装router 打y 前面默认回车就行

敲入代码就可以了

那么在config目录下的index.js可以修改相关端口与是否自动启动浏览器，这个就随意了，目录文件不解释

如何引入组件

首先在components中新建一个vue文件，顺便清空一下主组件App.vue的内容，因为之前安装router的话App.vue中是使用router的方式引入别的组件的，待会使用es6的方式引入组件

在Test.vue中随意敲点内容

在App.vue中使用import 引入组件，引入之后需要注意的就是一定要在引入的vue文件中注册，也就是下方的components对象中，那么原始写法是{name：template}，使用ES6写法省略了冒号，然后就可以在上方使用了，并可以重复使用，那么CLI是有热更新的，只需要保存代码浏览器即可自动更新

这样看起来是不是就像上篇写的例子了，搬过来再写一遍

<template>
  <div id="app">
    <div>
      <input type="text" v-model="info">
      <button @click="handleClick">添加</button>
    </div>
    <ul>
      <Test v-for="(item,index) in list" :key="index" :item="item"></Test>
    </ul>
    
  </div>
</template>

<script>
import Test from './components/Test'
export default {
  name: 'App',
  data(){
    return {
      list:[],
      info:''
    }
  },
  methods:{
    handleClick(){
      this.list.push(this.info)
      this.info=''
    }
  },
  components:{
      Test
  }
}
</script>

<style>

</style>

Test.vue中也修改一下

那么效果也OK了~可以看到在这个例子里，Test.vue嵌套在了App.vue中，那么此时App.vue就是Test.vue的父组件，Test.vue就是子组件了，这个概念可以吸收一下！可以看到子组件中是没有数据的，数据在父组件中，把其他组件的数据传递给自己这个过程叫组件间的通信。那么刚才这个过程可以理解为父子组件之前的通信，emmm 先点到为止

那么在传递数据的时候，首先传递的值需要v-bind(：)来绑定，同时在接收数据的组件中通过props来接收并用{{}}来解析，比较好理解，如果再加一个值呢？

子组件只需

<template>
    <div>
        <li>{{item}}---{{test}}</li>
    </div>
</template>

<script>
export default {
props:['item','test']
}
</script>

<style>

</style>

这里需要注意的是，在template中只能有一个根元素，也就是只有一个父元素，建议直接包个div就行

那么除了props传值还可以使用插槽solt传递

可以看到我取消了：item="item" 绑定，意味着子组件是没有属性可以接受的，那么在子组件中就需要使用slot来接收内容

<template>
    <div>
        <li>
            <slot></slot>
        </li>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

使用slot标签，效果相同，甚至可以传递标签，比如说

那么如何显示不同的slot呢？使用v-slot

<template>
    <div>
        <li>
            <slot name="item"></slot>
        </li>
    </div>
</template>

子组件中使用name来显示不同的内容

打开页面发现报了一个错，这个问题呢是 新语法（貌似是2.6的语法，没去关注）的问题，就是v-slot只能在template标签中

子组件不变，包个template传递即可，这个name传递称之为具名插槽
那么这里展示一下插槽的子组件返回父组件信息的操作，随便过一下（由于本人经验太少，可能这种通信方式用的少，并不常见吧）

<template>
    <div>
        
        <li>
            <input type="checkbox" v-model="checked"/>
            <slot name="item" v-bind="{checked}"></slot>
        </li>
    </div>
</template>

<script>
export default {
   data(){
       return{
           checked:false,
       }
   }
}
</script>

<style>

</style>

首先在子组件中，双向绑定一个布尔值，绑定在checked判断，默认false，每个input改变的都是自己返回的数据，这就是为什么data是一个函数的原因！在slot标签绑定一个对象，此处是缩写，也就是check：check，这个要习惯，不然会懵逼

      <Test v-for="(item,index) in list" v-bind:key="index">
           <template v-slot:item="itemProps" >
             <span   :style="{fontSize:'20px',color:itemProps.checked?'red':'blue'}">{{item}}</span>
           </template>
      </Test>

这里几个点注意，首先是v-slot:item 等号后面就是子组件返回的对象，准确的说是json
这里把style写成绑定状态，由于jsx模板的原因css需要使用驼峰写法，后面跟一个三元，看不懂后面会细讲，了解一下就行

那么此时效果就是这样