Vue元件通訊父子傳值之---子傳父
阿新 • • 發佈:2018-12-26
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
</head>
<body>
<div id ="app">
<father></father>
</div>
<script>
let son = {
template: '<div>我剛剛交往了一個女朋友,她名字叫{{girlfriendName}}<button @click="tellFather">點選告訴我女朋友叫{{girlfriendName}}</button></div>',
data () {
return {
girlfriendName: 'rose'
}
},
methods: {
tellFather() {
// 1. 在這裡通過this.$emit()方法向父親發射事件及資料
// $emit()函式這裡有兩個引數,一個是自定義事件名稱,另一個是資料
this.$emit('emitName', this.girlfriendName)
}
}
}
Vue.component('father', {
// 2. 在使用子元件的地方,通過v-on指令去監聽子元件發射過來的事件
template: '<div>我兒子告訴我,她交往的女朋友叫{{songfname}}<son @emitName="getName"></son></div>',
components: {
son
},
data () {
return {
songfname: '?????'
}
},
methods: {
// 3. 通過函式的預設引數,接收子元件發射過來的資料
getName(name) {
console.log('父親監聽到兒子發射的事件了');
console.log(name);
// 4. 直接給父元件中的變數賦值
this.songfname = name
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>