vue 父子组件交互_用于vue组件的交互式Sandox游乐场

最新推荐文章于 2022-08-13 20:15:50 发布

cuk5340

最新推荐文章于 2022-08-13 20:15:50 发布

阅读量183

点赞数

文章标签： vue java python react 人工智能 ViewUI

原文链接：https://vuejsexamples.com/interactive-sandox-playground-for-vue-components/

版权

vue 父子组件交互

组件夹具 (Component Fixture)

Interactive test fixture for vue component.

Vue组件的交互式测试夹具。

Component is designed to receive any component you want to test as a default slot

组件旨在将要测试的任何组件作为默认插槽接收

View demo 查看演示 View Github 查看Github

<component-fixture>

  <!-- Use the default slot to create the component under test -->
  <component-under-test/>

  <!-- Use this slot to enable edition of props values, Editor is provided by this lib-->
  <Editor slot="control" slot-scope="scope" v-bind="scope"/>

</component-fixture>

组件夹具将自动： (Component-fixture will automatically:)

Mirror all the props of the tested component
镜像测试组件的所有道具
Bind this data to the component under-test
将此数据绑定到被测组件
Display all the props in a form so that it is possible to edit them
以表格形式显示所有道具，以便可以对其进行编辑

特征： (Features:)

Respect props type and use custom input for each type
尊重道具类型并为每种类型使用自定义输入
Provide input for objects and function
提供对象和功能的输入
Create v-model binding if needed
根据需要创建v-model绑定
Custom props validation when available
可用的自定义道具验证
Support component with slots
带有插槽的支撑组件
Compatible with hot-reload: automatic update on changes hapening on the tested component
兼容热重装：自动更新测试组件发生的变化

Example using vue-slider-component:

使用vue-slider-component的示例：

使用案例 (Uses cases)

Why would you need such a component?

为什么需要这样的组件？

ComponentFixture is intended to be used only in a test/dev context with two main applications.

ComponentFixture仅打算在具有两个主要应用程序的测试/开发环境中使用。

发现第三方组件 (Discovering third party component)

Explore Interactively a component you are willing to use in your application.
以交互方式浏览您愿意在应用程序中使用的组件。
Understand by example what the props role.
以身作则，了解道具的作用。
Quickly identify bugs and limitation on the component.
快速识别组件上的错误和限制。

测试您创建的组件 (Testing a component you creates)

Create an example usage of your component that will update automatically
创建将自动更新的组件用法示例
Interact with the component while you create it.
在创建组件时与组件进行交互。
Easily identify bugs
轻松识别错误

下一步 (Next steps)

[x] Provide a way to default component props
[x]提供一种默认组件道具的方法
[ ] Monkey testing: use randomly generated updates on component props.
[]猴子测试：对组件道具使用随机生成的更新。

This will be provided on next major version.

这将在下一个主要版本中提供。

用法示例 (Example usage)

<component-fixture :defaults="{value: 23}">

  <!-- Use the default slot to create the component under test -->
  <component-under-test></component-under-test>

  <!-- Use this slot to enable edition of props values -->
  <template v-slot:control="scope">
    <editor v-bind="scope"/>
  </template>

</component-fixture>

import { ComponentFixture, Editor } from 'component-fixture'
import "component-fixture/dist/ComponentFixture.css"
import { componentUnderTest } from 'componentUnderTest'

export default {
  components: {
    ComponentFixture,
    componentUnderTest,
    Editor
  }
}

API (API)

插槽 (slots)

control slot for the form that will edit the props; editor is provided by this library and provide all the features.

用于编辑道具的表格的control栏；该库提供了编辑器，并提供了所有功能。
default Slot for the component under test

被测组件的default插槽

道具 (props)

defaults Object (optional)

defaults Object ( 可选 )

Object that will be set to default the component under-test props. For example if you want to default the props value with 46, just use: :defaults="{value: 46}"

将被设置为默认的被测道具的对象。例如，如果您想将props值默认设置为46，则只需使用:defaults="{value: 46}"