Vue组件-父子组件

父子组件的第一种形式

• 在Vue中典型的父子组件就是在Vue实例中创建局部组件

  <template id="info">
      <div>
          <p>我是组件</p>
      </div>
  </template>
  

  <div id="app">
      <info></info>
  </div>
  

  new Vue({
      el: '#app',
      components:{
          "info":{
              template:"#info",
          },
      },
  });
  

父子组件的第二种形式

• 自定义组件中创建局部组件

  <template id="father">
      <div>
          <p>我是父组件</p>
          <son></son>
      </div>
  </template>
  
  <template id="son">
      <div>
          <p>我是子组件</p>
      </div>
  </template>
  

  <div id="app">
      <father></father>
  </div>
  

  Vue.component('father', {
      template: "#father",
      components: {
          'son': {
              template: "#son",
          }
      }
  });
  
  new Vue({
      el: '#app',
  });
  

父子组件之间数据与方法的传递

• 父组件向子组件传递数据

  <!--通过V-bind指令传递
  格式:
  v-bind:子组件接收数据的名称="需要传递的数据"-->
  
  <div id="app">
      <son :a="name"></son>
  </div>
  

  new Vue({
      el: '#app',
      components: {
          "son": {
              template: '#son',
              data: function () {
                  return {
                      age: '34'
                  }
              },
              /* 通过props属性进行接收
              1.props属性详细讲解请看下面 */
              props: ["a"],
          }
      },
      data: {
          // 传递name数据
          name: "lnj"
      }
  });
  

  <template id="son">
      <div>
          <p>我是子组件</p>
          <!--使用
        1.数据使用"子组件接收数据的名称"-->
          <span>{{ a }}</span>
      </div>
  </template>
  

  • props属性详解

    new Vue({
        el: '#app',
        /* 注意点
        1.如果不进行接收数据的任何配置可通过数组的形式接收全部的数组 */
        props: [
            'a',
            'b',
            'c'
        ]
    });
    
    new Vue({
        el: '#app',
        /* 注意点
        1.如果需要对接收的数据进行简单的数据类型限制,可通过{}进行接收,在{}里面以keyvalue的形式进行配置
        2.如果需要对数据进行多个数据类型限制,可通过数组进行配置 */
        props: {
            // 单个类型限制
            a: String,
            b: Array,
            // 多个类型限制
            c: [Boolean, Number],
            // 不限制
            d: null
        }
    
    });
    
    new Vue({
        el: '#app',
        /* 注意点
        1.如果数据要进行更详细的配置,需要通过{}进行配置 */
        props: {
            a: {
                // 指定接收的数据类型
                type: Number,
                // 指定该数据必须传递
                required: true,
                // 指定改数据不传递的默认值
                default: "1111"
            }
        }
    });
    

• 父组件向子组件传递方法

  <!--通过@符号传递
  格式:
  @子组件接收方法的名称="需要传递的方法名称"-->
  
  <div id="app">
      <son @b="say"></son>
  </div>
  

  new Vue({
      el: '#app',
      components: {
          "son": {
              template: '#son',
              methods: {
                  userFather () {
                      /* 注意点
                      1.方法不需要任何属性进行接收
                      2.通过Vue实例对象的$emit方法进行调用
                      格式: 
                      this.$emit("子组件接收方法的名称")
                      3.在调用方法的时候还可以想父组件传递数据
                      格式:
                      this.$emit("子组件接收方法的名称", "需要传递的数据")*/
                      this.$emit('b', "zs")
                  }
              }
          }
      },
      methods: {
          say (data = "默认值") {
              console.log(data)
          }
      }
  });
  
  

  <template id="son">
      <div>
          <p>我是子组件</p>
          <!--使用
        1.方法使用"子组件接收数据的名称"-->
          <button @click="b">按钮</button>
      </div>
  </template>
  

父子组件之间传递数据或方法的命名问题

• 传递数据时候，如果子组件想使用驼峰命名的变量，那么父组件传递的时候使用短横线分割的名称进行传递

• 传递方法的时候，任何时候都不能使用驼峰命名，要么传递和使用的时候使用短横线命名，要么传递和使用的时候不适用短横线分割命名

  <div id="app">
      <!--
    1.传递数据使用短横线分割命名
    2.传递方法使用短横线分割命名-->
      <son :father-name="name" @father-change="change"></son>
  </div>
  

  new Vue({
      el: '#app',
      components: {
          "son": {
              template: '#son',
              data: function () {
                  return {
                      age: '34'
                  }
              },
              /*
              1.接收数据可使用驼峰命名接收 */
              props: ["fatherName"],
  
              methods: {
                  userFather () {
                      /*
                      1.方法的调用只能使用短横线分割命名 */
                      this.$emit('father-change', "zs")
                  }
              }
          }
      },
      data: {
          name: "lnj"
      },
      methods: {
          change (data) {
              this.name = data
          }
      }
  });
  

  <template id="son">
      <div>
          <p>我是子组件</p>
          <!--
        1.数据使用的时候能使用驼峰名称-->
          <span>{{ fatherName }}</span>
          <button @click="userFather">按钮</button>
      </div>
  </template>