Vue 사용자 정의 태그 component 구성 요소

1020 단어
Vue는 구성 요소를 사용자 정의하여 구성 요소에서 구성 요소 내용을 설정할 수 있습니다
주의: 사용자 정의 구성 요소의 이름은 대문자가 있을 수 없습니다. 그렇지 않으면 무효입니다!!!
사용자 정의 구성 요소는 script 탭에서 Vue를 사용하도록 정의합니다.component는 두 가지 인자를 정의합니다. 첫 번째는 사용자 정의 구성 요소의 이름이고, 두 번째는 하나의 대상에 사용자 정의 구성 요소의 정보를 저장합니다. 이 대상에 자주 사용되는 속성은 다음과 같습니다.template 속성은 사용자 정의 구성 요소의 내용을 표시합니다. (HTML 코드)props 속성은 받아들인 데이터를 의미합니다. 데이터의 양방향 연결을 실현하려면 저희 new Vue에서 정의한 데이터에 직접 접근할 수 없고, 전방에서 new Vue에서 데이터의 값을 얻을 수 있기 때문에 전방을 통해 이 값을 전달해야 합니다.(까다롭게 들리는데 자세히 이해하면 Vue.component에서 new Vue의 변수 값을 얻을 수 없고 앞의 HTML에서 HTML을 얻을 수 있기 때문에 앞의 속성을 연결해서 이 속성 값을 사용자 정의 구성 요소에 전달해야 한다. 아래의 예를 자세히 살펴보자)
// !!! Vue.component('myconponent',{ props : ['field'], template : '<li>{{field}}</li>' }); var v = new Vue({ el : '#d2', data : { bookList : [' ','Linux',' ','Hadoop'] } })

좋은 웹페이지 즐겨찾기