|
1 | | ---- |
2 | | -title: 0.11 Component Tips |
3 | | -date: 2014-12-08 15:02:14 |
4 | | -tags: |
5 | | ---- |
6 | | - |
7 | | -<p class="tip">Note: this post contains information for the outdated 0.11 version. Please refer to the [0.12 release notes](https://github.com/yyx990803/vue/releases) for the changes in the API.</p> |
8 | | - |
9 | | -The release of 0.11 introduced [many changes](https://github.com/yyx990803/vue/blob/master/changes.md), but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component. |
10 | | - |
11 | | -<!-- more --> |
12 | | - |
13 | | -### Isolated Scope and Data Passing |
14 | | - |
15 | | -Starting in 0.11, all child components have isolated scope by default, and the recommended way to control component data access is via [Explicit Data Passing](/guide/components.html#Explicit_Data_Passing) using [`v-with`](/api/directives.html#v-with) or [`paramAttributes`](/api/options.html#paramAttributes). |
16 | | - |
17 | | -`paramAttributes` enables us to write Web Component style templates: |
18 | | - |
19 | | -``` js |
20 | | -Vue.component('my-component', { |
21 | | - paramAttributes: ['params'], |
22 | | - compiled: function () { |
23 | | - console.log(this.params) // passed from parent |
24 | | - } |
25 | | -}) |
26 | | -``` |
27 | | - |
28 | | -``` html |
29 | | -<my-component params="{{params}}"></my-component> |
30 | | -``` |
31 | | - |
32 | | -### Where Does It Belong? |
33 | | - |
34 | | -Previously in 0.10, all directives on a component's container element are compiled in the child component's scope. Because it inherited parent scope, this worked in most situations. Starting in 0.11.1, we want to provide a cleaner separation between component scopes. The rule of thumbs is: if something appears in the parent template, it will be compiled in parent scope; if it appears in child template, it will be compiled in child scope. For example: |
35 | | - |
36 | | -``` html |
37 | | -<!-- parent template --> |
38 | | -<div v-component="child" v-on="click:onParentClick"> |
39 | | - <p>{{parentMessage}}</p> |
40 | | -</div> |
41 | | -``` |
42 | | - |
43 | | -``` html |
44 | | -<!-- child template, with replace: true --> |
45 | | -<div v-on="click:onChildClick"> |
46 | | - <h1>{{childMessage}}</h1> |
47 | | - <content></content> |
48 | | -</div> |
49 | | -``` |
50 | | - |
51 | | -Everything in the parent template will be compiled in the parent's scope, including the content that's going to be inserted into the child component. |
52 | | - |
53 | | -The only exception to the rule is `v-with` (and `paramAttributes` which compiles down to `v-with`), which works in both places - so you don't need to worry about it too much. |
54 | | - |
55 | | -### Cleaner Event Communication |
56 | | - |
57 | | -Previously the standard way for a child component to communicate to its parent is via dispatching events. However, with this approach, the event listeners on the parent component are not guaranteed to be listening on the desired child component only. It's also possible to trigger undesired listeners further up the chain if we do not cancel the event. |
58 | | - |
59 | | -The most common use case is for a parent to react to the events from a specific, direct child component. So in 0.11.4, [a new directive `v-events`](/api/directives.html#v-events) has been introduced to enable exactly this behavior. |
60 | | - |
61 | | -0.11.4 has already been released, go try it out! |
| 1 | +--- |
| 2 | +title: 0.11 Component Tips |
| 3 | +date: 2014-12-08 15:02:14 |
| 4 | +tags: |
| 5 | +--- |
| 6 | + |
| 7 | +<p class="tip">Note: post ini berisi informasi untuk versi lama 0.11. Silahkan lihat [0.12 release notes](https://github.com/yyx990803/vue/releases) untuk melihat perubahan pada API.</p> |
| 8 | + |
| 9 | +Perilisan dari 0.11 memperkenalkan [banyak perubahan](https://github.com/yyx990803/vue/blob/master/changes.md), tapi yang paling penting adalah bagaimana cara ruang lingkup komponen baru bekerja. Sebelumnya di 0.10.x, komponen mempunyai ruang linkup yang diwariskan sebagai settingan awal. Itu berarti di sebuah template child komponen kalian bisa menghubungkan properti ruang lingkup parent. Ini biasanya berakhir pada komponen dengan hubungan erat, dimana child komponen mengira-ngira pengetahuan dari properti apa yang ada di ruang lingkup parent. Ada juga kemungkinan untuk properti ruang lingkup parent tidak sengaja merujuk di komponen child. |
| 10 | + |
| 11 | +<!-- lebih banyak --> |
| 12 | + |
| 13 | +### Isolasi Ruang Lingkup dan Pengiriman Data |
| 14 | + |
| 15 | +Dimulai di 0.11, semua komponen child punya ruang lingkup terisolasi sebagai settingan awal, dan cara yang disarankan untuk mengendalikan kompenen akses data adalah lewat [Pengiriman Data Jelas](/guide/components.html#Explicit_Data_Passing) menggunakan [`v-with`](/api/directives.html#v-with) atau [`paramAttributes`](/api/options.html#paramAttributes). |
| 16 | + |
| 17 | +`paramAttributes` memperbolehkan kita untuk menulis template komponen tampilan web: |
| 18 | + |
| 19 | +``` js |
| 20 | +Vue.component('my-component', { |
| 21 | + paramAttributes: ['params'], |
| 22 | + compiled: function () { |
| 23 | + console.log(this.params) // diwariskan dari parent |
| 24 | + } |
| 25 | +}) |
| 26 | +``` |
| 27 | + |
| 28 | +``` html |
| 29 | +<my-component params="{{params}}"></my-component> |
| 30 | +``` |
| 31 | + |
| 32 | +### Darimana Asalnya? |
| 33 | + |
| 34 | +Sebelumnya di 0.10, semua arahan pada elemen wadah komponen dikompilasi di komponen ruang lingkup child. Karena mewariskan ruang lingkup parent, hal ini sering bekerja di beberapa situasi. Dimulai di 0.11.1, kita ingin menyediakan pemisahan yang lebih rapi antara komponen ruang lingkup. Peraturan thumbs adalah: jika sesuatu muncul di template parent, itu akan dikompilasi di ruang lingkup parent; jika itu muncul di template child, itu akan dikompilasi di ruang lingkup child. Sebagai contoh: |
| 35 | + |
| 36 | +``` html |
| 37 | +<!-- template parent --> |
| 38 | +<div v-component="child" v-on="click:onParentClick"> |
| 39 | + <p>{{Pesanparent}}</p> |
| 40 | +</div> |
| 41 | +``` |
| 42 | + |
| 43 | +``` html |
| 44 | +<!-- template child, dengan pergantian: true --> |
| 45 | +<div v-on="click:onChildClick"> |
| 46 | + <h1>{{Pesanchild}}</h1> |
| 47 | + <content></content> |
| 48 | +</div> |
| 49 | +``` |
| 50 | + |
| 51 | +Segala hal yang ada di template parent akan dikompilasi di ruang lingkup parent, termasuk konten yang akan dimasukkan ke dalam komponen child. |
| 52 | + |
| 53 | +Satu-satunya pengecualian pada peraturannya adalah `v-with` (dan `paramAttributes` yang dikompilasi menjadi `v-with`), dimana bekerja di kedua tempat - jadi kalian tidak perlu terlalu mencemaskannya. |
| 54 | + |
| 55 | +### Komunikasi Event yang Lebih Rapi |
| 56 | + |
| 57 | +Sebelumnya cara standar untuk sebuah komponen child untuk berkomunikasi dengan parent adalah lewat event pelepasan. Namun, dengan cara ini, pendengar event di komponen parent tidak terjamin untuk hanya mendengarkan komponen child yang diinginkan. Dan juga berkemungkinan untuk memicu pendengar yang tidak diinginkan masuk lebih dalam jika kita tidak membatalkan the event. |
| 58 | + |
| 59 | +Kasus penggunaan yang paling umum adalah untuk parent bereaksi ke events dari sebuah spesifik, komponen child langsung. Jadi di 0.11.4, [arahan baru `v-events`](/api/directives.html#v-events) telah diperkenalkan untuk mengaktifkan perilaku ini. |
| 60 | + |
| 61 | +0.11.4 sudah rilis, cobalah! |
0 commit comments