软件测试|Vue3 – 组件「上」

我心飞翔 分类:vue

vue-组件「上」

定义一个组件

将 Vue 组件定义在一个单独的 .vue 文件中,这被叫做单文件组件 (简称 SFC):

  • 组件路径:src/components/Hello.vue<template>
    <div>
    <!-- 唯一根元素 -->
    <p>组件Hello的vue文件</p>
    </div>
    <!-- 下面不能同时再放div根元素 -->
    </template>
    <script>

    </script>

    <style>

    </style>

使用组件

  • <script>
    import Hello from './components/Hello.vue'

    export default{
    name: 'app',
    data(){

    },
    computed:{
    },
    methods:{
    },
    components:{
    Hello //注入
    }
    }
    </script>

    <template>
    <main>
    <div>
    <Hello />
    <h1>类与样式绑定</h1>
    <div :class="{active: isActive}">样式</div>
    </div>
    </main>
    </template>

    1. script 标签内导入
    1. components 内注入
    1. template 模版内使用导入声明的标签
软件测试|Vue3 - 组件「上」
在这里插入图片描述

组件复用

  • 组件可以被重用任意多次,每个组件在引用的时候都是独立实例化。<template>
    <div>
    <!-- 唯一根元素 -->
    <h2>组件Hello的vue文件</h2>
    <div>
    <p>{{ count }}</p>
    <button @click="count += 1">按钮</button>
    </div>
    </div>
    <!-- 下面不能同时再放div根元素 -->
    </template>
    <script>
    export default{
    data(){
    return{
    count:0
    }
    }
    }
    </script>

    <style>
    </style>

    软件测试|Vue3 - 组件「上」
    在这里插入图片描述
  • 每用一次组件,就会有一个新的实例被创建。
  • 组件中data必须是一个函数。需求通过点击按钮,元素进行增加操作:

引用多次

软件测试|Vue3 - 组件「上」
在这里插入图片描述

Props

  • 理解为父传子,App.vue传入值给Hello.vue
  • 使用字符串数组来声明
  • 使用对象的形式
    - 属性:
    - key 是 prop 的名称
    - 值是该 prop 预期类型的构造函数

    软件测试|Vue3 - 组件「上」
    在这里插入图片描述

报错一

[Vue warn]: Invalid prop: type check failed for prop "title". Expected String with value "0", got Number with value 0. 
  at <Hello title=0 number=12 > 

期望是一个string类型,但是获取到的是一个number类型。

软件测试|Vue3 - 组件「上」
在这里插入图片描述

原因分析

传递的类型不能出错,如果出错,对应页面会警告报错

解决方案

传递的类型要跟写入声明的参数类型一致

子传父

  • 自定义事件的子的vue文件传递给父文件
软件测试|Vue3 - 组件「上」
在这里插入图片描述

子vue

  • 组件的模板表达式中,可以直接使用 $emit 方法触发自定义事件 (例如:在 v-on 的处理函数中):<template>
    <div>
    <!-- 唯一根元素 -->
    <div>
    <button @click="sendMessageHandle">传递数据</button>
    </div>
    </div>
    <!-- 下面不能同时再放div根元素 -->
    </template>
    <script>
    export default{
    data(){
    return{
    message:"我是Hello的vue数据"
    }
    },
    methods:{
    sendMessageHandle(){
    // key,value key对应的事件,value是传递的值
    this.$emit("onMyEnvent",this.message)
    }
    }
    }

    </script>
    <style>
    </style>

  • Hello.vue

父vue

  • 父组件可以通过 v-on (缩写为 @) 来监听事件
<script>import Hello from './components/Hello.vue'export default{  name: 'app',  data(){    return{      getHelloMessage:""    }  },  methods:{    getHelloMessageHandle(data){        console.log(data);        this.getHelloMessage = data;    }  }}</script><template>  <main>       <div>      <p>{{getHelloMessage}}</p>      <Hello :title="0" :number="12"             @onMyEnvent="getHelloMessageHandle"/>    </div>  </main></template>
  • 点击传递数据,对应在子vue文件内的数据传递给前端,并在控制台输出打印。
    软件测试|Vue3 - 组件「上」
    在这里插入图片描述

回复

我来回复
  • 暂无回复内容