vue的父元件向子元件的通訊
1.要引入vue.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<parent>
</parent>
</div>
<script src="../vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
},
components: {
"parent": {
data() {
return {
name: "這個是父元件",
str:"litingchen"
}
},
template: '<div><p>父元件</p><h1 v-text="name"></h1><chlid :a="name" :b="str"></chlid></div>',
components: {
"chlid": {
props:["a","b"],
data() {
return {
na:"這個是子元件"
}
},
template: '<div><p>子元件</p><h2 v-text="na"></h2><p>{{"這個是父元件的資料:"+a}}</p></div>'
}
}
}
}
})
</script>
</body>
</html>