Vue中子组件向父组件传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<children @datas="showdata"></children>
<h1>{{showmessage}}</h1>
</div>
<template id="child">
<div >
<button @click="sendmessage(message)">传送数据</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const children={
template: "#child",
data(){
return {
message:"我是个消息"
}
},
methods: {
sendmessage:function (value) {
console.log("send")
this.$emit("datas",value)
}
}
}
const app=new Vue({
el:"#app",
data:{
showmessage:"null"
},
components:{
children
},
methods:{
showdata:function (value) {
console.log(value+"**************")
this.showmessage=value;
}
},
})
</script>
</body>
</html>
希望对你有所帮助