父元件向子元件傳遞資料(vue.js)
阿新 • • 發佈:2019-01-10
父元件: app.vue
子元件: header.vue
子元件:
父元件:<template> <div> <!-- logo 是在data中(父元件)定義的變數 如果需要從父元件中獲取logo的值,就需要使用props['logo'], 如30行 在props中添加了元素以後,就不需要在data中(子元件)中再新增變量了 --> <div id='logo'>{{logo}}(我是父元件傳遞過來的值)</div> <ul class="nav"> <li v-for="nav in navs">{{nav.li}}</li> </ul> </div> </template> <script> export default{ name:'headerDiv', data(){ return{ navs:[ {li:'主頁'}, {li:'日誌'}, {li:'說說'}, {li:'主頁'}, {li:'相簿'} ] } }, props:['logo'] } </script> <style scoped> .nav li{list-style: none;} </style>
<template> <div id="app"> <img src="./assets/logo.png"> <!-- 在呼叫元件的時候,使用v-bind將logo的值繫結為 APP.vue中定義的變數 logoMsg 然後就能將App.vue中的logoMsg的值傳給header.vue 了 --> <headerDiv :logo="logoMsg"></headerDiv> <h1>{{msg}}</h1> <firstcomponent></firstcomponent> <router-view></router-view> </div> </template> <script> import firstcomponent from './components/firstcomponent.vue' import headerDiv from './components/header.vue' export default { name: 'app', data(){ return{ msg:'hellow Vue', logoMsg:'WiseWrong' } }, components:{firstcomponent,headerDiv}, } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>