组件化开发

一、全局组件和局部组件

全局组件：即可以在多个Vue实例中使用

Vue实例1



Vue实例2

局部组件：只能在当前Vue实例中使用

使用：在Vue实例中使用components属性引用

const app = new Vue({
  el: "#app",
  data: {
    message: "你好啊！"
  },
  components:{
    cpn: cpnC
  }
})

二、父组件和子组件

在一个组件中注册另一个组件，这个组件就可以称为另一个组件的父组件，注Vue实例可以看成一个root组件

三、注册组件的语法糖写法

全局组件语法糖写法：

Vue.component('cpn1',{
  template: `
  

    
我是组件1
    
哈哈哈
  
`
})

局部组件语法糖写法：

const app = new Vue({
  el: "#app",
  data: {
    message: "你好啊！"
  },
  components: {
    'cpn2': {
       template: `
         

          
我是组件2
          
呵呵呵
         
`
    }
  }
})

四、组件模版抽离的写法

使用script标签或者template标签

1.script标签 text/x-template类型


2.template标签

2.组件中的data为什么必须是函数

下面是一个简单的计数器的例子，我们创建3个组件实例，data是函数使得这三个实例间的数据不会相互干扰，即改变其中一个并不会影响到其余组件实例

六、父子组件间的通信

在开发中，我们会在整个页面的大组件中向服务器请求许多数据，但是有些数据并非整个页面的大组件中要展示的，而是需要下面的子组件进行展示，这个时候，我们就需要将数据从大组件（父组件）传递给小组件（子组件）

父子组件间的通信方式

• 1.通过props向子组件传递数据 父传子

• 2.通过事件向父组件发送消息 子传父

  
  
  

  父子.png

（一）props基本用法 父传子

props除了数组外，还可以用对象

  props: {
    //1.类型限制
    cmovies: Array,
    cmessage: String,

    //2.提供一些默认值，以及必传值
    cmessage: {
      type: String,
      default: 'aaaaaa',
      required: true
    },
    //类型是对象或者数组时，默认值必须是一个函数
    cmovies: {
      type: Array,
      default() {
        return []
      }
    }
  },

注意：目前版本v-bind不支持驼峰标识

例如一下代码 当props中使用驼峰标识

    props: {
      cInfo: {
        type: Object,
        default() {
          return {}
        }
      },
      childMyMessage: ''
    }

如果在绑定时v-bind中也使用驼峰，并不会识别

这时需要做如下转换，就可以正常显示了

（二）自定义事件 子传父

1.子组件自定义事件，然后发射给父组件：$emit()

......
 methods: {
   btnClick(item) {
     // console.log(item);
     //子组件向父组件发射事件:自定义事件
     this.$emit('item-click',item)
   }
 }

2.父组件模版中监听自定义事件

3.父组件中处理

 methods: {
   cpnClick(item) {
     console.log('btnClick',item);
   }
 }

实际上就是使用v-on监听自定义事件

  
  



 
.

真实项目中，组件会封装在vue文件中，解析成render函数

（三）父子组件的访问方式

有时我们需要父组件直接访问子组件，或者子组件直接访问父组件，或者子组件访问跟组件，这是我们可以通过对象方式直接访问

• 父组件访问子组件：使用refs
• 子组件访问父组件：使用$parent

1.$children

一个父组件可能有多个子组件，所以获取的是个数组

  
  
  
  按钮

2.$refs——对象类型，默认是空对象

在开发中，并不推荐使用children，当需求取指定第三个子组件时它是通过数组索引去取到，但是如果前面添加了一个新的子组件，我们还需要修改索引值。因此推荐使用$refs

   我们只需要先给要取到的子组件加一个ref属性

  
  
  
  按钮

  然后就可以根据属性名称找到对应的子组件
methods: {
  btnClick() {
    console.log(this.$refs.aaa.name);
  }
},
就是键值对的形式

3.$parent:不推荐使用，会使子组件复用性变差，耦合度提高

4.$root:访问跟组件，即vue实例

  



  

    
我是cpn组件
    
  



  

    
我是ccpn组件
    按钮
  

七、watch属性

watch来监测Vue实例上的数据变动