vue.js에서 컴포넌트를 사용하는 방법-View.js-php.cn

vue.js에서 컴포넌트를 사용하는 방법

coldplay.xixi

풀어 주다： 2020-11-12 14:24:52

원래의

5986명이 탐색했습니다.

vue.js에서 구성요소를 사용하는 방법: 1. HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화합니다. 2. 구성요소는 사용자 정의 요소이며 [Vue.js]의 컴파일러는 여기에 특수 기능을 추가합니다. is 속성으로 확장된 기본 HTML 요소 형식입니다. ㅋㅋㅋ

늘 그렇듯, 인용문 Vue 공식 웹사이트의 한 문장:

vue.js에서 컴포넌트를 사용하는 방법 Component는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js 컴파일러가 특별한 기능을 추가하는 사용자 정의 요소입니다. 경우에 따라 구성 요소는 is 속성으로 확장된 기본 HTML 요소의 형태를 취할 수도 있습니다.

컴포넌트 컴포넌트 등록글로벌 컴포넌트:

Vue.component(&#39;todo-item&#39;,{
  props:[&#39;grocery&#39;],
  template:&#39;<li>{{grocery.text}}</li>&#39;
})
var app7 = new Vue({
  el:"#app7",
  data:{
    groceryList:[
      {"id":0,"text":"蔬菜"},
      {"id":1,"text":"奶酪"},
      {"id":2,"text":"其他"}
    ]
  }
})

로그인 후 복사

<div id="app7">
  <ol>
    <todo-item
      v-for="grocery in groceryList"
      v-bind:grocery="grocery"
      v-bind:key="grocery.id">
    </todo-item>
  </ol>
</div>

로그인 후 복사

로컬 등록:

var Child = {
 template: &#39;<div>A custom component!</div>&#39;
}
new Vue({
 // ...
 components: {
  // <my-component> 将只在父模板可用
  &#39;my-component&#39;: Child
 }
})

로그인 후 복사

DOM 템플릿 구문 분석 지침

컴포넌트는 특정 HTML 태그에 따라 일부 제한 사항이 적용됩니다.

예를 들어 코드의 테이블 태그 아래에 있는 구성 요소가 유효하지 않습니다.

<table>
 <my-row>...</my-row>
</table>

로그인 후 복사

해결 방법은 is 속성을 통해 구성 요소를 사용하는 것입니다

<table>
 <tr is="my-row"></tr>
</table>

로그인 후 복사

다음 소스 중 하나의 문자열 템플릿을 사용하면 제한되지 않습니다.

<script type="text/x-template">

로그인 후 복사

JavaScript 인라인 템플릿 문자열

Component

data는 여러 구성 요소가 서로 상호 작용하는 것을 방지하기 위해 함수를 사용합니다.

html

<div id="example-2">
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
</div>

로그인 후 복사

var data = { counter: 0 }
Vue.component(&#39;simple-counter&#39;, {
 template: &#39;<button v-on:click="counter += 1">{{ counter }}</button>&#39;,
 data: function () {
  return data
 }
})
new Vue({
 el: &#39;#example-2&#39;
})

로그인 후 복사

위와 같이 div 아래에는 세 가지 구성 요소가 있으며 각 구성 요소는 카운터를 공유합니다. 구성 요소를 클릭하면 모든 구성 요소의 카운터가 1씩 증가합니다.

해결책은 다음과 같습니다

Vue.component(&#39;simple-counter&#39;, {
 template: &#39;<button v-on:click="counter += 1">{{ counter }}</button>&#39;,
 data: function () {
  return {counter:0}
 }
})
new Vue({
 el: &#39;#example-2&#39;
})

로그인 후 복사

이렇게 하면 각 구성 요소가 생성된 후 고유한 전용 카운터를 갖게 됩니다.