溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
屬性傳值，子組件props 接收
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="js/vue.min.js"></script>
<script>
//1:創建父組件
Vue.component("parent",{
data:function(){
return {money:3000}
},
template:`
<div>
<h5>父組件</h5>
<child :myValue="money"></child>
</div>
`
});
//2:創建子組件
Vue.component("child",{
template:`<div><h4>子組件</h4>
{{myValue}}
</div>`,
props:["myValue"], // 聲明變量保存父組件數據
mounted:function(){
//聲明變量結束，獲取父元素數據.
//己存保存 this.data
console.log(this.myValue);
}
});
//3:創建Vue
new Vue({el:"#app"});
</script>
</body>
</html>
<body>
<div id="app">
<my-login></my-login>
</div>
<script src="vue.min.js"></script>
<script>
Vue.component("my-login",{
template:`
<div>
<h4>父組件</h4>
username
<my-input tips="用戶名"></my-input>
password
<my-input tips="密碼"></my-input>
</div>
`
});
Vue.component("my-input",{
props:['tips'],
template:`
<input type="text" :placeholder="tips" />
`
});
new Vue({el:"#app"});
</script>
</body>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
