页面级组件

在pages中定义的组件被称为页面级组件。

页面级组件(等同于Vue页面)，通过路由配置可以进行页面跳转。

自定义组件(子组件)

在components中定义的组件被称为自定义组件。

自定义组件(等同于Vue的子组件)，将使用比较多的部分进行封装，可以多次使用。

引入自定义组件(子组件)

举例说明

父组件给子组件传值

父组件给子组件传值使用的是props,其语法与vue 的props传值类似，可以规定传值类型、默认值等，还可以进行数据校验。

区别： 父组件给子组件进行传值时使用的是短横线分割命名，在子组件中通过props 接收时使用的是驼峰命名

在进行校验时，验证顺序是 必填项检查 -> 类型检查 -> 函数检查

语法

• 父组件

    <!-- 如果属性名是多个单词 使用短横线分割命名 -->
    <son 属性名=属性值></son>
  

• 子组件

  props: [] // 仅类型检查
  

  props:{
    属性名:{
      type: String/Number... // 类型检查
      required: true/false // 是否必填
      default:  // 默认值
      validator: function(value){
        return true/false // 检查是否符合要求
      }
    }
  }
  

举例说明：在父组件接收三个参数分别为name( 字符串类型且必传)，年龄(数字类型，只能接受18，19，29三个中的某一个数字)，地址(字符串类型，不能超过18个字， 默认为中国)并将展示在页面上

• 父组件

  <import name="son" src="../../components/Detail"></import>
  <template>
    <div class="wrapper">
      <son per-name='{{name}}' per-age='{{age}}'></son>
    </div>
  </template>
  
  <script>
  export default {
    public:{
      name: 'chaochao',
      age: 18
    }
  }
  </script>
  

• 子组件

  <template>
    <div class="wrapper">
      <text>{{ perName }}</text>
      <text>{{ perAge }}</text>
      <text>{{ perArea }}</text>
    </div>
  </template>
  
  <script>
  export default {
    props:{
      perName:{
        type: String,
        required: true
      },
      perAge:{
        type: Number,
        validator: function(value){
          return [18, 19, 29].includes(value)
        }
      },
      perArea:{
        type: String,
        default: '中国',
        validator: function(value){
          return value.length < 18
        }
      }
    }
  }
  </script>
  

• 展示结果
  

子组件给父组件进行传值

父给子组件进行传值是单向数据流，也就是说子组件不能直接修改父组件传值的引用！

语法

// 子组件
this.$dispatch('子组件触发事件名',值)
// 父组件
onInit(){
  this.$on('子组件触发事件名',触发的父方法方法)
}

// 子组件
this.$emit(方法名，值)
// 父组件
<son on方法名=‘父组件方法’></son>

举例说明：在子组件修改父组件传过来的name属性

• 方式1

  • 子组件：触发父组件自定义事件

    editname(){
      this.$dispatch('dispatchEvt',{
        name:'niuniu'
      })
    }
    

  • 子组件：监听自定义事件触发

    onInit(){
      this.$on('dispatchEvt',this.editName)
    },
    editName(value){
      console.log(value)
    }
    

    打印结果如下：
    
    因此我们可以通过如下方式进行赋值

    editName(value){
     this.name = value.detail.name
    }
    

• 方式2

  • 子组件

    editname(){
      this.$emit('editName',{
        name:'niuniu'
      })
    }
    

  • 父组件

    <son p-name="{{name}}" p-age="{{age}}" onedit-name='editname'></son>
    

    editname(value){
      console.log(value)
    }
    

    打印结果如下：
    
    因此我们可以通过如下方式进行赋值

    editName(value){
     this.name = value.detail.name
    }
    

tips: 当传递结束后，可以调用value.stop()来结束传递,否则会一直传递下去

父组件调用子组件的方法

<son id='xxx'></son>

const ele = this.$child('子组件id名') // 获取子组件
ele.方法名() //  方法调用