Vue.js 컴포넌트 라이브러리 이벤트 시스템 설계 프로세스(코드)

이 글의 내용은 Vue.js 컴포넌트 라이브러리 이벤트 시스템의 디자인 프로세스(코드)에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

input-number를 예로 들어 보겠습니다.

@은 v-on 명령어의 약어이며 이벤트 리스너를 바인딩하는 데 사용됩니다.

<InputNumber @on-change="change" :max="10" :min="1" v-model="value1">
</InputNumber>

컴포넌트를 사용할 때 custom 이벤트를 등록합니다: 自定义的事件：

methods: {
    change (v) {
        console.log(v)
    }
}

在组件内部触发的方式也很简单：

调用了 $emit 来触发当前实例上的事件，事件名为 on-change

this.$emit('on-change', val);

那思路来了，如果 InputNumber 外层嵌套在了某一个 FormItem 组件里面，事件之间的互相调用也是类似的，只是多了个假设：

嵌套关系，可能有多级父子

像 element 和 iview 多设计了一个 mixins，里面提供了一个方法：dispatch

它接受 3 个参数：

• componentName 组件名

• eventName     自定义事件名称

• params        事件传递的参数

dispatch(componentName, eventName, params) {
}

比如类似 input-number，很多这种表单内嵌的组件，都会设计和 FormItem 的互动：

this.dispatch('FormItem', 'on-form-change', val);

我们在设计 FormItem组件的时候，注意：

export default {
    name: 'FormItem'
}

然后注册一个自定义事件，方式也是一样的：

<Form-item @on-form-change="test">
</Form-item>

我们来看一下 dispatch 函数的内部：

思路是一层一层往上找父元素：

• $parent -- 父实例

• $root -- 组件树的根 Vue 实例

var parent = this.$parent || this.$root;

获取父组件的 name:

var name = parent.$options.name;

开始循环判断：

while (parent && (!name || name !== componentName)) {
    // ...
}

比如上面的input-number 内部调用了 dispatch，传入了参数，就是一直找父元素 name 为 FormItem

parent = parent.$parent;
if (parent) {
    name = parent.$options.name;
}

컴포넌트 내부에서 이를 트리거하는 방법도 매우 간단합니다.

은 를 호출합니다. $emit는 현재 인스턴스에서 이벤트를 트리거합니다. 이벤트 이름은 on-change

if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
}

InputNumber가 중첩되어 있는 경우입니다. 외부 레이어 특정 FormItem 구성 요소에서 이벤트 간의 상호 호출은 유사하지만 추가 가정이 있습니다:

중첩 관계, 여러 수준의 상위 및 하위가 있을 수 있음 #🎜🎜 # element 및 iview와 같이 dispatch

#🎜 메소드를 제공하는 추가 mixins를 설계했습니다. 🎜 #3 매개변수를 허용합니다:

• comComponentName 구성 요소 이름

• eventName 맞춤 이벤트 이름

• params 이벤트가 전달하는 매개변수

rrreee예: input-number와 같이 이 양식에 포함된 많은 구성 요소는 FormItem과 상호 작용하도록 설계됩니다. rrreee
We are designing FormItem 컴포넌트, 참고: rrreee

그런 다음 같은 방식으로 맞춤 이벤트를 등록합니다. rrreee 디스패치 함수 내부를 살펴보겠습니다. : #🎜 🎜#

아이디어는 상위 요소를 찾기 위해 레이어별로 올라가는 것입니다:

• $parent - - 상위 인스턴스#🎜🎜 #
• #🎜🎜#$root -- 컴포넌트 트리의 루트 Vue 인스턴스 #🎜🎜#

rrreee#🎜🎜#이름 가져오기 상위 구성 요소: #🎜🎜#rrreee #🎜🎜#루프 판단 시작: #🎜🎜#rrreee#🎜🎜#예를 들어 위의 input-number는 내부적으로 디스패치를 ​​호출하고 매개변수는 상위 요소 name을 계속 찾는다는 것을 의미합니다. 그 동안 내부에 있는 FormItem의 #🎜🎜##🎜🎜#은 다음과 같습니다. #🎜🎜##🎜🎜# 그런 다음 상위 예제를 찾은 다음 이름을 가져옵니다#🎜🎜#rrreee# 🎜🎜#마지막으로 발견된 경우: #🎜🎜##🎜🎜#은 사용자 정의 이벤트의 초기 트리거와 동일합니다: $emit#🎜🎜# rrreee#🎜🎜#관련 권장 사항: #🎜🎜##🎜🎜## 🎜🎜#Vue.js 구성 요소 통신 상위 구성 요소에 대한 하위 구성 요소 통신(코드)#🎜🎜##🎜🎜##🎜🎜##🎜🎜# #🎜🎜#Vue.js 모바일 컴포넌트 라이브러리 활용 방법#🎜 🎜##🎜🎜##🎜🎜##🎜🎜#

위 내용은 Vue.js 컴포넌트 라이브러리 이벤트 시스템 설계 프로세스(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!