Vue父子傳值(父傳子)
阿新 • • 發佈：2019-01-06
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script> </head> <body> <div id="box"> <parent parnetmsg="自定義輸入的值"></parent> </div> <!-- 父類元件模板 --> <template id="fa"> <div> <!-- props裡的值也可以直接使用{{}} --> 父類元件的值：{{famsg}}，父類元件傳值props：{{parnetmsg}} <!-- 在父類元件模板裡面使用props內的函式進行傳值給子類，注意要用v-bind否則傳的只是普通的字串 --> <child :message="famsg"></child> </div> </template> <!-- 子類元件模板 --> <template id="ch"> <div>子類元件的值：{{message}}</div> </template> <script type="text/javascript"> var vm=new Vue({ el:"#box", components:{ /*父類元件*/ "parent":{ template:"#fa", data:function(){ return {famsg:"吳師傅(父類值)"} }, props:["parnetmsg"], /*子類元件*/ components:{ "child":{ template:"#ch", /*子類接受父類傳的值就得用props*/ props:["message"] } } } } }); </script> </body> </html>