vue学习笔记（四）

组件

组件的使用主要分成了三个部分
1.创建组件构造器
调用Vue.extend()方法创建组件构造器
2.注册组件
调用Vue.component()方法注册组件
3.使用组件
在Vue实例范围内使用组件

** 1.组件的基本使用**

<div id="app">
    <div>
        <my-cpn></my-cpn>//3. 在Vue实例范围内使用组件，因为这个div的id是app已经注册实例了
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
//1.调用Vue.extend()方法创建组件构造器
 const cnpC = Vue.extend({
         template:'
             <div>
               <h2>hello</h2>
                <h2>i am zsy</h2>
                 <h2>thank you</h2>
             </div>
           '
     }）
//2.调用Vue.component()方法注册组件
Vue.component('my-cpn',cpnC)
//该方法需要传入两个参数，一个是你带回引用组件的自定义标签，一个是你的组件构造器的名字

  const app = new Vue({
   el: '#app',
   data: {
     msg:'hello world'
     }
 })
</script>

2.全局组件和局部组件

<div id="app">
    <div>
        <my-cpn></my-cpn>//3. 在Vue实例范围内使用组件
        <cpn></cpn>
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
//1.调用Vue.extend()方法创建组件构造器
 const cnpC = Vue.extend({
         template:'
             <div>
               <h2>hello</h2>
                <h2>i am zsy</h2>
                 <h2>thank you</h2>
             </div>
           '
     }）
//2.调用Vue.component()方法注册组件
Vue.component('my-cpn',cpnC)
//注册的是一个全局组件！！！！，全局组件意味着可以在多个实例下引用

  const app = new Vue({
   el: '#app',
   data: {
     msg:'hello world'
     }，
   components:{
      cpn:Cpn
    }//局部注册 只能在app实例中引用！！！！！
 })
</script>

3.父组件和子组件

<div id="app">
    <div>
        <cpn2></cpn2>//会显示两个组件的内容
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
//1创建第一个组件（子组件）
 const cnp1 = Vue.extend({
         template:'
             <div>
               <h2>hello</h2>
                <h2>i am zsy</h2>
                 <h2>thank you</h2>
             </div>
           '
     }）

//2。创建第二个组件（父组件）
 const cnpC2 = Vue.extend({
         template:'
             <div>
               <h2>hello</h2>
                <h2>i am zsy</h2>
                 <h2>thank you</h2>
             </div>
           '，
         components:{//组件构造器一放在了组件构造器二中进行注册！！
         //注意：在哪儿组册就只能在哪儿使用
            cpn1:Cpn1
            }
     }）
//2.调用Vue.component()方法注册组件
Vue.component('my-cpn',cpnC)

//app其实也是一个root组件 顶层组件
  const app = new Vue({
   el: '#app',
   data: {
     msg:'hello world'
     }，
     components:{
      cpn2:Cpn2//组件构造器二放在了app实例中注册！！！！！！！
    }
 })
</script>

4.组件的语法糖
其实就是一二步合并的写法,不再需要第一步组件构造器

//语法糖注册全局组件
  Vue.component('my-cpn',{
         template:'
             <div>
               <h2>hello</h2>
                <h2>i am zsy</h2>
                 <h2>thank you</h2>
             </div>
           ,
  })

//语法糖注册局部组件
const app = new Vue({
   el: '#app',
   data: {
     msg:'hello world'
     }，
   components:{
      'cpn':{template:'
             <div>
               <h2>hello</h2>
                <h2>i am zsy</h2>
                 <h2>thank you</h2>
             </div>
           '}
    }
 })

5.组件模板分离

写法一：

<div id="app">
    <div>
        <my-cpn></my-cpn>//3. 在Vue实例范围内使用组件，因为这个div的id是app已经注册实例了
    </div>
</div>

<script type="text/x-template" id = "my-cpn"> 
   <div>
       <h2>hello</h2>
       <h2>i am zsy</h2>
       <h2>thank you</h2>
    </div>
</script>

<script src="../js/vue.js"></script>

<script>
Vue.component('my-cpn':{
     template:'#my-cpn'
  })


  const app = new Vue({
   el: '#app',
   data: {
     msg:'hello world'
     }
 })
</script>

写法2:

<div id="app">
    <div>
        <my-cpn></my-cpn>
    </div>
</div>

<template id= "my-cpn"> 
   <div>
       <h2>hello</h2>
       <h2>i am zsy</h2>
       <h2>thank you</h2>
    </div>
</template>

<script src="../js/vue.js"></script>

<script>
 
Vue.component('my-cpn':{
     template:'#my-cpn'
  })


  const app = new Vue({
   el: '#app',
   data: {
     msg:'hello world'
     }
 })
</script>

6.父组件和子组件之间的通信
子组件不能直接引用父组件中，或者vue实例的数据。但是在开发中，往往一些数据确实需要从上层传到下层。
比如一个页面，我们请求到了大量数据，但是这些数据需要在子组件中展示，这时候不会让子组件自己发送一个网络请求给服务器端，而是直接让父组件传给子组件。

那么如何实现父组件和子组件之间的通信呢？vue提供给我们两种方式：
1.通过prop向子组件传递数据；
2.通过事件，向父组件发送消息。

vue实例本身可以看作是组件，在实际开发过程中，实例与子组件的通信与父子组件之间的通信相同。

1.props基本用法
在组件中使用选项props来声明需要从父级接受的数据
props的值有两种方式：
方式一：字符串数组，那么数组中的字符串就是传递时的名称
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

方式一：

<div id="app">
   <cpn v-bind Movies="movies" Message="msg"></cpn>
</div>
<template id= "cpn"> 
   <div>
     {{Message}}//这样在子组件里面就可以用到实例的数据了
     <ul>
        <li v-for= "item in Movies">{{item}}</li>
     </ul>
    </div>
</template>


<script src="../js/vue.js"></script>
<script>
  const cpn={
  template:'#cpn',
  props:['Movies','Message'],//props可以是数组类型 上文我已经提及过了
  data(){
      }//组件里面可以定义实例的各种类型，data、methods等当然包括props
       }
  const app = new Vue({
   el: '#app',
   data: {
     msg:'hello world',
     movies:['海王','海贼王','海尔兄弟']
     }，
   components:{
     cpn//增强写法
   }
 })
</script>

方式二：

<div id="app">
   <cpn v-bind Movies="movies" Message="msg"></cpn>
</div>
<template id= "cpn"> 
   <div>
     {{Message}}//这样在子组件里面就可以用到实例的数据了
     <ul>
        <li v-for= "item in Movies">{{item}}</li>
     </ul>
    </div>
</template>


<script src="../js/vue.js"></script>
<script>
  const cpn={
  template:'#cpn',
  props:{
       //1.类型限制
        Movies:Array,//验证类型为Array
        Message:string
        //2.设置默认值，以及必传值
        Message:{
            type:string,
            default:'aaaaa',
            require:true//加上require属性之后，表示使用该对象的时候必须传值否则会报错
         }，
         Movies:{
           type:Array,
           default(){//注意！！如果是对象或者数组的话default必须写成函数形式
                return []
             }
        }
     },
  data(){
      }//组件里面可以定义实例的各种类型，data、methods等当然包括props
       }
  const app = new Vue({
   el: '#app',
   data: {
     msg:'hello world',
     movies:['海王','海贼王','海尔兄弟']
     }，
   components:{
     cpn//增强写法
   }
 })
</script>

2.props中的驼峰标识

3.子组件向父组件传递消息（通过自定义消息）

//父组件模板,就用实例当作父组件
<div id="app">
    <div>
    <cpn v-on:item-click="cpnClick"></cpn>
    </div>
</div>

//子组件模板
<template id= "cpn"> 
   <div>
     <button v-for="item in categories">{{item.name}}</button>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
//子组件
 const cpn={
         template:'#cpn',
         data(){
             return {
                 categories:[
                       {id:"aaa",name:"热门推荐"}
                       {id:"bbb",name:"家用电器"}
                       {id:"ccc",name:"手机电脑"}
                       {id:"ddd",name:"美妆服饰"}
                    ]
              }
          },
          methods:{
               btnclick(item){
                      this.$emit("item-click",item);//子组件发射一个事件给父组件，第一个参数为事件名称（待会父组件需要监听这个事件），第二个参数是给父组件传递的东西
                }
          }
     }）

//父组件
  const app = new Vue({
   el: '#app',
   data: {
     msg:'hello world'
     }，
     components:{
      cpn
    },
    methods:{
        cpnClick(){
            console.log("cpnClick")
         }
    }
 })
</script>

至此，父子组件通信就已经基本了解了