父組件 把 data的值想傳遞給子組件, 通過一個關鍵詞 props
步驟如下:
- 首先在適用組件的地方 進行 數值綁定, v-bind:parentMsg=‘msg’ 這個步驟就是 把父組件的msg值綁到parentMsg上面
- 在子組件創建 props ,這裏保存都是 父組件傳遞的值 比如 parentMsg ,
- 然後再使用, 注意 要用props裏面的 ,用的時候 直接用插值表達式就行了
示例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
</head>
<body>
<div id="pp" >
<login v-bind:parmsg="msg"></login>
</div>
<div>
<script>
var vue=new Vue({
el:'#pp',
data: {
msg:'我是父組件'
},
components:{
login:{
template:'<h1>我是子組件{{parmsg}}</h1>',
props:['parmsg']
},
}
}
)
</script>
</div>
</body>
</html>