1.環境搭建
- 下載 vue-cli：
npm install -g vue-cli - 初始化專案：
vue init webpack vue-demo - 進入vue-demo資料夾：
cd vue-demo - 下載安裝依賴：
npm install - 執行該專案：
npm run dev
2.父元件向子元件傳值
- src/components/資料夾下建一個元件，Home.vue
- 建立子元件，在src/components/資料夾下新建一個資料夾，在新建資料夾中新建一個元件Child.vue
在Child.vue中建立props，用於接收父元件傳遞的值
<template>
<div>
<div v-for="(item,key) of c" :key="key">
{{key}}: {{item}}
</div>
</div>
</template>
<script>
export default {
name: 'child',
props: {
c: Array
}
}
</script>
<style scoped>
</style>
複製程式碼在Home.vue中註冊Child元件，並在template的div標籤中新增home-child標籤，標籤中使用v-bind指令繫結c。子元件通過props就可以接受到這個父元件傳遞的值。
<template>
<div class="hello">
<home-child v-bind:c="c"></home-child>
</div>
</template>
<script>
import HomeChild from '@/components/common/Child'
export default {
name: 'home',
components: {
HomeChild
},
data () {
return {
c:[1,2,3]
}
}
}
</script>
<style scoped>
</style>
複製程式碼結果
3.子元件向父元件傳值
給按鈕繫結點選事件ChildClick 在事件的函式中使用$emit來觸發一個自定義事件，並傳遞一個引數，這個引數就是子元件要傳遞給父元件的值。
<template>
<div>
<div v-for="(item,key) of c" :key="key">
{{key}}: {{item}}
</div>
<button v-on:click="ChildClick">點選向父元件傳值</button>
<span>{{data}}</span>
</div>
</template>
<script>
export default {
name: 'child',
props: {
c: Array,
data: String
},
methods: {
ChildClick: function () {
this.$emit("ListenChild","I am child.vue")
}
}
}
</script>
<style scoped>
</style>
複製程式碼在父元件中的home-child標籤中監聽該自定義事件，並新增一個響應該事件的方法ShowChild。
<template>
<div class="hello">
<home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
</div>
</template>
<script>
import HomeChild from '@/components/common/Child'
export default {
name: 'Home',
components: {
HomeChild
},
data () {
return {
c:[1,2,3],
data: " "
}
},
methods: {
ShowChild: function (data) {
this.data = data
console.log("data:" + data)
}
}
}
</script>
<style scoped>
</style>
複製程式碼結果：
點選按鈕後：
