Vue学习笔记（三）

咔卡熊

已于 2022-06-30 18:59:18 修改

阅读量454

点赞数

分类专栏：前端文章标签： vue

于 2022-06-30 18:57:18 首次发布

本文链接：https://blog.csdn.net/qq_41045128/article/details/125537662

版权

前端专栏收录该内容

17 篇文章 12 订阅

订阅专栏

官网:https://v3.cn.vuejs.org/guide/introduction.html

一、组件中的props 验证

在封装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。

例如：上一章的例子中，希望名字传入的只能是字符串，年龄只能是数字。而仅使用数组类型的 props 节点【 props: ['name', 'age'] 】的缺点：无法为每个 prop 指定具体的数据类型。

而使用对象类型的 props 节点，可以对每个 prop 进行数据类型的校验。

<!-- 其他组件 -->
<template>
  <div>
   <p> 姓名：{{name}}</p>
   <p>年龄：{{age}}</p>
  </div>
</template>

<script>
export default {
  name: 'Test',
  // 外界可以传递指定的数据，到当前的组件中
  props: {
    name:String,
    age:Number
  }
}
</script>
 
<!-- App.vue组件 -->
<template>
  <div>
    <h3 class="title">这是 App 组件</h3>
    <test age="18" name="王强"></test>
  </div>
</template>

<script>
import test from './components/Test.vue'
export default {
  name: 'App',
  components:{
    test
  }
}
</script>

对象类型的 props 节点提供了多种数据验证方案：

① 基础的类型检查 ② 多个可能的类型 ③ 必填项校验 ④ 属性默认值 ⑤ 自定义验证函数

基础的类型检查：age : Number

多个可能的类型：age : [Number,String]

必填项校验 :

 props: {
    age: {
      type: Number,
      required: true
    },
}

属性默认值;

age: {
      type: Number,
      required: true,
      default: 100 //如果没有传值，count默认为100
    },

自定义验证函数

props: {
    type: {
          validator(value) {
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
        }
    }

二、计算属性

计算属性本质上就是一个 function 函数，它可以实时监听 data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用。

计算属性的使用注意点：

计算属性必须定义在 computed 节点中
计算属性必须是一个 function 函数
计算属性必须有返回值
计算属性必须当做普通属性使用

相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。

三、自定义事件

在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。

自定义事件的 3 个使用步骤

声明自定义事件 :   必须事先在 emits 节点中声明
触发自定义事件:    通过 this.$emit('自定义事件的名称') 方法进行触发,可以通过第 2 个参数为自定义事件传参

监听自定义事件:   通过 v-on 的形式监听自定义事件

例子：

<template>
  <div>
    <h3>自定义事件demo</h3>
    <p>{{ count }}</p>
    <!-- 3、v-on缩写@  进行绑定-->
    <button @click="add"> +1 </button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0
    }
  },
  // 1、先声明到 emits 节点中
  emits: ['change'],
  methods: {
    // 当点击 +1 按钮时，调用 add 方法，this.$emit( 'change' ) 触发change事件
    add() {
      this.count++
      // 2、触发自定义事件，并且传参
      this.$emit( 'change', this.count )
    }
  }
}
</script>

四、组件上的数据传输

v-bind

父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件
子组件中，通过 props 接收父组件传递过来的数据

<!-- App.vue组件 -->
<template>
  <div>
    <h1>App 组件</h1>
    <p>App-count: {{count}}</p>
    <counter :count="count"></counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  name: 'App',
  data() {
    return {
      count: 0
    }
  },
  components: {
    Counter
  }
}
</script>


<!-- 子组件 -->
<template>
  <div>
    <h3>Counter 组件</h3>
    <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  props: ['count']
}
</script>

v-model

在 v-bind: 指令之前添加 v-model 指令
在子组件中声明 emits 自定义事件，格式为 update:xxx
调用 $emit() 触发自定义事件，更新父组件中的数据

<!-- App.vue组件 -->
<template>
  <div>
    <h1>App 组件</h1>
    <p>App-count: {{count}}</p>
    <button @click="add"> +1 </button>
    <counter v-model:count="count"></counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'
export default {
  name: 'App',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++
    }
  },
  components: {
    Counter
  }
}
</script>



<!-- 子组件 -->

<template>
  <div>
    <h3>Counter 组件</h3>
    <p>{{count}}</p>
    <button @click="sub"> -1 </button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  props: ['count'],
  emits: ['update:count'],
  methods: {
    sub() {
      this.$emit( 'update:count', this.count-1 )
    }
  }
}
</script>