父元件向子元件傳遞引數的demo （元件通過區域性定義）
阿新 • • 發佈：2018-12-14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>父元件的取值</h1>
<p>msg:{{msg}}</p>
<!--父元件向子元件傳值
1、依賴於指令 v-bind ：自定義屬性名==>用在子元件標籤上
2、組建中的屬性 props ==>定義在子元件例項中
-->
<itany v-bind:info="msg"></itany>
</div>
<script src="js/vue.js"></script>
<template id="ita">
<div>
<h1>子元件取值</h1>
<p>msg:{{info}}</p>
</div>
</template>
<script>
/* Vue.component('blog-post',{
props:['title'],
template: '#itany',
});*/
</script>
<script>
var vm = new Vue({
el:"#app",
data:function(){
return{
msg:"父元件的資料"
}
},
components:{
itany:{
template:"#ita",
data:function(){
return{}
},
props:{
info:""
}
}
}
})
</script>
</body>
</html>