<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件通信</title>
<style>
table {
width: 500px;
border: 1px solid;
margin: 10px auto;
}
td {
padding: 10px 0;
text-align: center;
}
</style>
</head>
<body>
<div id="tab">
<table >
<tbody>
<tr style="background-color: #008000;color: white;">
<td colspan="3">父組件</td>
</tr>
<tr>
<td>name</td><td>{{name}}</td><td><input type="text" v-model="name"/></td>
</tr>
<tr>
<td>age</td><td>{{age}}</td><td><input type="text" v-model="age"/></td>
</tr>
</tbody>
</table>
<v-son :sname="name" @chan="fchange" :sage="age"></v-son>
</div>
<template id="moban">
<div>
<button @click="chanfa">兒子</button>
<table>
<tbody>
<tr style="background-color: #008000;color: white;">
<td colspan="3">{{name}}</td>
</tr>
<tr>
<td>name</td><td>{{name}}</td><td><input type="text" v-model="name"/></td>
</tr>
<tr>
<td>age</td><td>{{age}}</td><td><input type="text" v-model="age"/></td>
</tr>
</tbody>
</table >
<v-sons></v-sons>
</div>
</template>
<template id="moban2">
<div>
<table>
<tbody>
<tr style="background-color: #008000;color: white;">
<td colspan="3">{{names}}</td>
</tr>
<tr>
<td>name</td><td>{{names}}</td><td><input type="text"/></td>
</tr>
<tr>
<td>age</td><td>{{ages}}</td><td><input type="text"/></td>
</tr>
</tbody>
</table >
</div>
</template>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
new Vue({
el:"#tab",
data:{
name:"父組件",
age: "18"
},
methods:{
fchange (val){
this.name=val
}
},
components: {
"vSon":{
props:['sname',"sage"],
data(){
return{
name:this.sname,
age:this.sage
}
},
methods:{
chanfa(){
this.$emit("chan",this.name)
}
},
template:"#moban",
components: {
"vSons":{
data(){
return{
names:"後代組件",
ages:"8"
}
},
template:"#moban2",
}
}
}
}
});
</script>
</html>
vue 子的值傳給父的值
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
N網下載mod方法: 20240614親測好使
https://www.bilibili.com/video/BV1k8411575T/?vd_source=d68ed178f151e80fea1e02efd205802c