Vue.js 组件传值

• 什么是组件化？

  组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融化，变成一个完整的应用。页面只不过是这样组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

  前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的小东西。

• 组件的优缺点

  组件更加清晰直观，组件关系更加清晰，结果可以预测

  最小化了重绘（diff算法） 避免了不必要的dom操作

• 注册组件的过程

  1. Vue.extend():
  • 调用Vue.extend()创建的是一个组件构造器
  • 通常在创建组件构造器时，传入template代表自定义的组件模板
  • 该模板就是要显式的HTML代码。

  2. Vue.component():

     调用Vue.component()将组件构造器注册成一个组件，并给它起一个组件的标签名称

     需要传递两个参数：1.注册组件的标签名 2.组件构造器

  3. 组件必须挂载在Vue的实例下，否则不会生效

• 注册组件的语法糖

  省略 Vue.extend() 直接使用对象代替

    // 全局注册
    Vue.component('cpn1', {
      template: `
      
   
        
  标题1
        
  内容111
      
  `
    })
    const app = new Vue({
      el: "#app",
      data: {
      },
      // 局部注册
      components: {
        cpn2: {
          template: `
      
   
        
  标题2
        
  内容222
      
  `
        }
      }
    })
  
  

• 模板分离的写法

  1. script标签写法

  
   
  Vue.component('cpn', {
      template: '#cpn'
    })
  

  2. 通过template标签

  
  
  Vue.component('cpn', {
    template: '#cpn'
  })
  

• 组件存放数据

  组件对象也可以通过data属性存放数据，但data必须是一个函数，而且需要返回一个对象，对象内部存放数据。

• 父子组件通信

  子组件不能引用父组件或者Vue实例中的数据，但实际开发中需要将数据从父组件传递给子组件，或者子组件发送给父组件。比如: 服务器返回的数据有一部分是要给子组件展示的，这个时候就需要父传子了。

  通过props向子组件传递数据

  通过事件向父组件发送消息

  1. 父组件向子组件传递数据

  //1.首先在父组件中注册子组件，
  //2.在子组件中通过props定义变量接收，
  //3.通过绑定属性的形式将值传递给子组件
  //4.子组件中就可以使用传递过来的值了。
  
    
  
      
    
    
  
  
  
  

  2. 子组件向父组件传递数据

  //1.在子组件中通过$emit发射自定义事件
  //2.在父组件中监听自定义事件