js中寫法：
var com1 = {
template: "#temp",
data(){
return {
msg: '子組件獲取到了父組件的1000'
}
},
props:['parentmsg'],
methods: {
sendMsg(){
this.$emit('func',this.msg);
}
}
};
var vm = new Vue({
el:"#newBrand",
data:{
msg:'父元素數據，1000',
msgFromson: ''
},
methods:{
getMsgFromson(data){
this.msgFromson = data;
console.log(this.msgFromson);
}
},
components:{
com1
}
});
html中寫法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueTest</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="newBrand">
<com1 :parentmsg="msg" @func="getMsgFromson"></com1>
</div>
<template id="temp">
<div>
<h1>這是子元素 --- {{ parentmsg }}</h1>
<input type="button" value="向父組件傳遞消息" @click="sendMsg">
</div>
</template>
<script src="js/newBrand.js"></script>
</body>
</html>