vue学习笔记02-组件

vue学习笔记02-组件

组件的基本使用

创建方法：

1. 一般写法(不常用)

• 通过extend函数构建组件构造器

    // 1. 创建组件构造器
    const cpnc = Vue.extend({
      // ``定义字符串可用换行
      template:`
        <div>
          <h2>我是标题</h2>
          <p>我是内容1</p>
          <p>我是内容2</p>
        </div>
      `
    })
  

• 注册组件：
  • 注册全局组件，可以在全部Vue实例中使用
  • component参数：(‘标签名’,组件构造器）

    // 2. 注册组件(全局组件,可以在多个vue实例中使用)
    Vue.component('my-con',cpnc);
  

  • 注册局部组件，只可以在注册的实例中使用
    • 通过Vue实例中的components属性进行注册
    • 是一个对象，属性：标签名：组件构造器名

      // 2. 注册组件(局部组件，只能在app中使用)
      const app = new Vue({
        el:'#app',
        data:{},
        //  定义只能在本vue实例用的 局部组件
        components:{
        //  cpn:使用组件时使用的标签名
            cpn:cpnc
        }
      })
    

2. 语法糖写法(省略构建组件构造器的代码，直接进行注册)

• 将component函数的第二个参数换成构建组件构造器时传入的对象
• vue会自动使用传入的对象完成构造器的构建然后进行注册

    // 3.语法糖： 将component中的第二个参数换成构建组 省去了调用extend的操作
    // component('标签名', {
    //   template:'标签内容'
    // })
    Vue.component('cpn1',{
      template: `
        <div>
          <h2>我是标题1</h2>
          <p>我是标内容1111<p/>
        </div>
      `
    });
  

3. 父组件与子组件

• 在组件内部通过components属性进行注册（即某个组件的局部组件为他的子组件）

• 在组件的模板中就可以使用该子组件

  const cpnC2 = Vue.extend({//父组件
    template:`
      <div>
        <h2>我是标题2</h2>
        <p>我是标内容2222<p/>
        <cpn1></cpn1>
      </div>
    `,
    //在cpnC2中注册了cpnC1
    //可以在父组件中可以使用子组件
    components:{
      cpn1:cpnC1,
    }
  })
  
  

• 语法糖写法：

    Vue.component('cpn1',{
      template: `
        <div>
          <h2>我是标题1</h2>
          <p>我是标内容1111<p/>
        </div>
      `
    });
    Vue.component('cpnC1',{
      template: `
        <div>
          <h2>我是标题1</h2>
          <p>我是标内容1111<p/>
        </div>
      `,
      components:{
        cpn1,
      }
    });
  

4. 组件模块的分离写法

• script标签，用得较少
  • 需要将type属性指定为：text/x-template
  • 指定id，通过script标签的id进行注册

  <script type="text/x-template" id="cpn">
    <div>
      <h2>我是标题</h2>
      <p>抽离的模板1</p>
    </div>
  </script>
  
  <script>
    Vue.component('cpn',{
      template:'#cpn',//script标签的id
    })
  </script>
  
  

• template标签
  • 指定id，通过id进行注册

    <template id="cpn">
      <div>
        <h2>我是标题</h2>
        <p>抽离的模板1</p>
      </div>
    </template>
    
    <script>
      Vue.component('cpn',{
        template:'#cpn',//template标签的id
      })
    </script>
    
    

5. 组件中的数据存放问题

• 组件不能访问Vue实例种得数据
• 组件的data属性必须是一个函数，返回一个实例

    Vue.component('cpn',{
      template:'#cpn',
      //data属性应该是一个function, 返回一个实例
      data(){
        return{
          title:'abc',
        }
      }
    });
    const app = new Vue({
      el:'#app',
      data:{}
    })
  

• 为什么组件的data是一个函数

  • 如果是一个实例，组件复用时，组件的实例会使用同一个data，会互相产生影响

      // 创建一个组件
      var Component= function() {
      }
      Component.prototype.data = {
        a: 1,
        b: 2
      }
    
      // 使用组件
      var component1 = new Component()
      var component2 = new Component()
      component1.data.b = 3
      component2.data.b   // 3
    

  • 当我们的data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了

      // 创建一个组件
      var Component= function() {
      }
      Component.prototype.data =function() {
        return {
          a: 1,
          b: 2
        }
      }
    
      // 使用组件
      var component1 = new Component()
      var component2 = new Component()
      component1.data.b = 3
      component2.data.b   // 2
    
    

组件通信

1. 父传子

• 一般步骤
  • 1. 在组件的中添加props属性，是一个对象，对象中的属性未需要从父组件中传来的值
  • 2. 在组件中可以直接通过Mastarch语法使用props对象中的值
  • 3. 父组件在使用子组件时，需要通过属性的动态绑定来传递值：:子组件props中的属性名:"父组件中的属性名"

  <div id="app">
  <!--	<cpn :cmovies="movies" :cmessage="message"></cpn>-->
    <cpn :cmessage="message" :cmovies="movies"></cpn>
  </div>
  
  <template id="cpn">
    <div>
      <ul>
        <li v-for="item in cmovies">{{item}}</li>
      </ul>
      {{cmessage}}
    </div>
  </template>
  
  <script>
    const cpn = {
      template:'#cpn',
      props:{
        cmessage:{
          type:String,//限制类型
          default:'default value', //默认值
          required: true //设置该属性是否为必须值,为true时如果使用组件时不传参数,会报错
        },
        // 类型时对象或则数组时,默认值default必须是一个函数
        cmovies:{
          type:Array,
          default(){
            return []
          }
        }
      }
    }
    const app = new Vue({
      el:'#app',
      data:{
        movies:['A','B','C','D'],
        message:'hello'
      },
      components:{
        cpn
      }
    })
  

• props的几种形式：
  • 数组形式：直接通过数组声明全部值，较少使用

        const cpn = {
        template:'#cpn',
        //数组形式
        props:['cmovies','cmessage'],
        }
    
      } 
    

  • 对属性进行类型限制

          const cpn = {
            template:'#cpn',
            cmovies:Array,
            cmessage:String,
          }
    
        } 
    

  • 通过对象声明，可以限制类型和设置默认值
    • type 限制变量的类型
    • default 设置默认值
    • required 声明使用组件时是否需要传递该属性的参数
    • 数组和对象的default属性必须是一个函数

            const cpn = {
              template:'#cpn',
              props:{
                cmessage:{
                  type:String,//限制类型
                  default:'default value', //默认值
                  required: true //设置该属性是否为必须值,为true时如果使用组件时不传参数,会报错
                },
                // 类型是对象或则数组时,默认值default必须是一个函数
                cmovies:{
                  type:Array,
                  default(){
                    return []
                  }
                }
    
    
              }
    
            }
    

• 注意点：驼峰命名
  • 如果在props对属性进行命名时，如果使用了驼峰命名法，父组件在使用子组件时，若传入参数，需要将属性名使用-根据驼峰将每个单词分割开
  • 原因：v-bind不支持驼峰命名法

  <div id="app">
  <!--	v-bind不支持驼峰-->
  <!--	需要用-将驼峰分开 cInfo->c-info-->
    <cpn :c-info="info" :child-my-message="message"></cpn>
  </div>
  

2. 子传父

• 通过子组件的自定义事件完成
• 通过$emit自定义事件，并发出
• 父组件在使用子组件时，通过监听自定义事件，获取子组件传出的参数