前端應用_Vue_父組件傳遞值給子組件

父組件 把 data的值想傳遞給子組件, 通過一個關鍵詞 props

步驟如下:

  1. 首先在適用組件的地方 進行 數值綁定, v-bind:parentMsg=‘msg’ 這個步驟就是 把父組件的msg值綁到parentMsg上面
  2. 在子組件創建 props ,這裏保存都是 父組件傳遞的值 比如 parentMsg ,
  3. 然後再使用, 注意 要用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>
發佈了265 篇原創文章 · 獲贊 145 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章