- 父組件向子組件傳值：
步驟：
在子組件中創建一個props屬性，用以接收父組件傳過來的值；
父組件中注冊子組件；
在子組件標簽中添加子組件props中創建的屬性；
把需要傳給子組件的值賦給該屬性。
按照以上步驟，用代碼實現效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父組件向子組件傳參</title>
<script src="https://cdn.bootcss.com/vue/1.0.21/vue.min.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<template id="parent">
父組件數據：{{msg}} <br />
子組件獲取到的父組件數據：<child :msg="msg"></child> <!-- ②③④ -->
</template>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components: {
parent: {
data() {
return {
msg: 'parent-data'
}
},
methods: {
},
template: '#parent',
components: {
child: {
data() {
return {
}
},
methods: {
},
props: ['msg'], // ①
template: '<span>{{msg}}</span>'
}
}
}
}
})
</script>
</html>
（注：此文引入的 vue.js ，僅適用于vue的1.0版本，對于vue的高版本不支持。）
- 子組件向父組件傳值：
步驟：
子組件中需要以某種方式例如點擊事件的方法來觸發一個事件；
將需要傳的值作為emit方法的第二個參數（第一個參數為方法名），通過子組件的事件，將參數發射出來；
在父組件中注冊子組件，并通過emit的第一個參數的方法名作為事件，然后用父組件的方法的來獲取參數。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/1.0.21/vue.min.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<template id="parent">
父組件獲取到的數據：{{msg}}
<child @emit="get"></child> <!-- ③ -->
</template>
<template id="child">
<div>{{msg}}</div>
<input type="button" value="發射" @click="send" name=""> <!-- ① -->
</template>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components: {
parent: {
data() {
return {
msg: ''
}
},
methods: {
get(msg) {
this.msg = msg
}
},
template: '#parent',
components: {
child: {
data() {
return {
msg: 'child_data'
}
},
methods: {
send() { // ②
this.$emit('emit', this.msg)
// 第一個參數：方法名 第二個參數：需要傳給父組件的值
}
},
template: '#child'
}
}
}
}
})
</script>
</html>
希望此文，對你學習vue有所幫助！
