Vue.js 가이드로 공부하기 (2)
이제는 컴포넌트를 사용해 볼 것이다.
공식 가이드 문서에 따르면,
vue는 독립적이며 재사용 할 수 있는 컴포넌트로 구성된 대규모 애플리케이션을 구축할 수 있도록 한다고 한다.
vue에 컴포넌트를 등록하는 법은 매우 간단하다.
먼저 전체 소스코드를 보자.
<!DOCTYPE html>
<head>
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-7">
<ol>
<app-test
v-for="item in todoList"
v-bind:prop="item"
v-bind:key="item.id"
>
</app-test>
</ol>
</div>
</body>
<script>
Vue.component("app-test", {
props: ["prop"],
template: "<li>{{ prop.text }}</li>",
});
var app7 = new Vue({
el: "#app-7",
data: {
todoList: [
{ id: 0, text: "plan1" },
{ id: 1, text: "plan2" },
{ id: 2, text: "plan3" },
],
},
});
</script>주목해야할 점은 컴포넌트를 사용할 때마다 똑같은 텍스트를 렌더링 하기 위해 (부모 영역의 데이터를 자식 컴포넌트에 전달하기 위해) prop을 전달할 수 있도록 props를 설정해야한다는 것이다.
Vue.component("app-test", {
props: ["prop"],
template: "<li>{{ prop.text }}</li>",
});이렇게 함으로써 v-bind를 사용하여 반복되는 app-test 컴포넌트에 전달할 수 있게 된다.
Author And Source
이 문제에 관하여(Vue.js 가이드로 공부하기 (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mahns/Vue.js-가이드로-공부하기-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
