父子傳值！程式碼詳解
阿新 • • 發佈：2021-01-18
父傳子：
<body>
<div id='app'>
<songname title="我是父元件傳來的"> </songname>
<songname></songname>
<songname :title="title"></songname>
</div>
<template id="login">
< 子傳父：
<body>
<!-- 父 -->
<div id='app'>
<!-- 子 -->
<sonname @father="fatherchange"></sonname>
{{sondata}}
</div>
<template id="login">
<div>
登入元件
父元件傳值：{{title}}
<button @click="addDataTofather"> 點我幹大事</button>
</div>
</template>
<script>
Vue.component("sonname", {
template: "#login",
props: {
// 1.指定資料型別
// title:String
// 2指定多種資料型別
// title:[String,Number]
// 3指定預設資料
// title:{
// type:String,
// default:"課程標題"
// },
title: {
type: [String, Number],
default: "課程標題"
}
},
methods: {
addDataTofather() {
this.$emit("father", "傳過來的子元件資料")
}
},
})
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
title: "俺是父元件傳來的動態屬性繫結",
sondata: ""
},
methods: {
fatherchange(data) {
console.log(data);
this.sondata = data
}
},
})
</script>