Vue.js元件通訊
本篇介紹在Vue.js應用程式中如何讓元件彼此通訊。
Vue元件可以使用不同的方式進行通訊。
Props
第一種方式是使用props。
父元件可以透過在元件宣告時加入參數，將資料傳遞給子元件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <template>
<div>
<Car color="green" />
</div>
</template>
<script>
import Car from './components/Car'
export default {
name: 'App',
components: {
Car
}
}
</script>
|
Props是單向的，只能由父元件傳送資料給子元件。當父元件改變prop的值時，新的值會被傳送給子元件並重新渲染。
反過來是不行的，子元件不應該去修改prop的值。
使用事件在子元件到父元件之間通訊
事件允許你從子元件向父元件進行通訊：
1
2
3
4
5
6
7
8
9
10
| <script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$emit('clickedSomething')
}
}
}
</script>
|
在父元件的template中，可以使用v-on指令來攔截這個事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<div>
<Car v-on:clickedSomething="handleClickInParent" />
<!-- 或者 -->
<Car @clickedSomething="handleClickInParent" />
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleClickInParent: function() {
//...
}
}
}
</script>
|
當然，你也可以傳遞參數：
1
2
3
4
5
6
7
8
9
10
| <script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$emit('clickedSomething', param1, param2)
}
}
}
</script>
|
然後在父元件中接收這些參數：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<div>
<Car v-on:clickedSomething="handleClickInParent" />
<!-- 或者 -->
<Car @clickedSomething="handleClickInParent" />
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleClickInParent: function(param1, param2) {
//...
}
}
}
</script>
|
使用事件巴士在任意元件之間通訊
使用事件不僅限於子元件和父元件之間的通訊。
你可以使用所謂的事件巴士。
在上面的例子中，我們使用了this.$emit在元件實例上觸發一個事件。
我們可以改為在一個更普遍訪問的元件上觸發這個事件。
Vue的根元件this.$root通常用於此種情況。
你也可以創建一個專門用於事件的Vue元件，然後在需要的地方引入。
1
2
3
4
5
6
7
8
9
10
| <script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$root.$emit('clickedSomething')
}
}
}
</script>
|
其他元件可以監聽這個事件，你可以在mounted回調中進行：
1
2
3
4
5
6
7
8
9
10
| <script>
export default {
name: 'App',
mounted() {
this.$root.$on('clickedSomething', () => {
//...
})
}
}
</script>
|
其他替代方案
這是Vue原生提供的方法。
當你需要更進一步時，可以考慮使用Vuex或其他第三方庫。
tags: [“Vue.js”, “Components”, “Props”, “Events”, “Event Bus”, “Communication”]