Vue 컴포넌트 사용에 대한 세부 사항에 주의해야 합니다.-JS 튜토리얼-php.cn

Vue 컴포넌트 사용에 대한 세부 사항에 주의해야 합니다.

php中世界最好的语言

풀어 주다： 2018-06-02 10:25:50

원래의

1547명이 탐색했습니다.

이번에는 주의하셔야 할 Vue 컴포넌트 사용에 대한 자세한 내용을 알려드리겠습니다. Vue 컴포넌트 사용 시 주의사항은 무엇인가요?

세부정보 1

기본 예

실행 결과:

모두가 위의 내용을 알고 있으므로 여기서는 자세히 설명하지 않겠습니다. 코드로 돌아가서 때로는 모든 줄이 필요합니다. tbody에 하위 컴포넌트인데 어떻게 코드를 작성하나요? 다음과 같이 작성하고 전역 구성 요소를 다음과 같이 정의할 수 있습니다.

그런 다음 본문에서 다음과 같이 호출할 수 있습니다.

실행 결과:

행이 다음과 같은 것을 볼 수 있습니다. 인쇄되었지만 실제로는 미션 내용이 없는데 문제가 어디에 있습니까? 코드로 돌아가서, vue 인스턴스를 생성할 때 마운트할 지점을 지정하지 않았으므로 el을 사용하여 vue가 인수한 Dom을 다음과 같이 지정했습니다.

실행 결과:

문제 없을 것 같은 느낌이 들지만 과연 그럴까요? 요소를 확인하여 DOM 구조를 확인합니다.

오류가 보이나요? 정상적인 3개의 tr은 tbody에 있어야 하는데 이제 tbody와 동일한 레이어에 있습니다. 무슨 일이 일어나고 있는 걸까요?

H5 사양에서는 테이블에 tbody가 있어야 하고 tr은 tbody에 배치되어야 합니다. 이제 행으로 작성된 하위 구성 요소를 사용하므로 브라우저에서 구문 분석할 때 문제가 발생합니다.

이런 상황이 발생하면 어떻게 버그를 해결해야 할까요? 이때 vue에서 제공하는 is 속성을 사용하여 이 문제를 해결할 수 있습니다. 아주 간단합니다. tbody에는 tr만 쓸 수 있으므로 모두 tr을 씁니다. 하지만 실제로 tr을 표시하려면 tr의 빈 내용만 표시해야 하는 것이 아닙니다. 행 구성요소, 그러면 어떻게 해야 할까요?

다음과 같이 tr에 추가 속성을 추가하여 행과 동일하게 만들 수 있습니다.

이 코드의 의미는 다음과 같습니다. 구성 요소를 사용하고 싶지만 이 구성 요소를 직접 작성할 수는 없습니다. 그래서 우리는 tr을 썼는데, 내가 쓴 것이 tr이지만 행 컴포넌트라는 뜻으로 사용합니다. 이렇게 하면 H5 사양을 준수할 수 있을 뿐만 아니라 우리 컴포넌트의 내용도 표시할 수 있습니다. 프로그램에는 버그가 없습니다.

실행 결과:

모든 것이 정상입니다.

同样我们使用 ul, select 标签的时候，也可以用这种方法。

세부 2

기본 예

이 텍스트 조각을 별도로 추출하여 변수로 표현하려면 텍스트가 포함된 구성 요소 행을 정의했습니다. , then you have lot 다음과 같이 쓸 수도 있습니다:

완벽해 보이지만 브라우저를 열고 실행하면 버그가 당신에게 물결치는 것을 발견할 것입니다:

주요 의미는 데이터는 객체가 아니라 함수라는 것입니다. 어쨌든 vue의 가장 바깥쪽 인스턴스인 루트 구성 요소에서는 객체를 통해 정의해도 괜찮지만 하위 구성 요소에서는 정의해도 됩니다. 루트가 아닌 구성 요소의 경우 이렇게 정의해도 괜찮습니다. 아니요. 데이터를 정의하려면 함수여야 하며 이 함수는 다음과 같이 개체를 반환해야 합니다.

실행 결과:

이 방법으로 문제가 해결됩니다.

之所以这么定义，原因是一个子组件不像根组件只被调用一次，而是可以多次调用，那么每一个子组件的数据我们不希望和其它的子组件产生冲突或者说每个子组件都应该有一个自己的数据域，通过函数返回一个对象就可以实现这个需求。

상세 3

기본예제

실행하고 클릭하면 뜨는데 문제없습니다. Vue에서는 Dom을 코드로 작동하는 것을 권장하지 않지만, 매우 복잡한 animation 효과를 다룰 때는 실제로 Dom을 작동해야 합니다. 그렇다면 Vue에서 Dom을 작동하는 방법은 무엇일까요? 다음과 같이 ref 를 통해 를 참조할 수 있습니다.