vue.js 父向子组件传参的实例代码

const STORAGE_KEY = 'todos-vue.js'export default{  fetch(){    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')  },  save(items){    window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));  }}

<template> <div id="app">  <h1 v-text="title"></h1>  <input v-model="newItem" v-on:keyup.enter="addNew"/>  <ul>   <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click='toogleFinish(item)'>    {{item.label}}   </li>  </ul>  <!-- 使用组件，注意驼峰命名法转化成短线 -->  <!-- 向自组件传数据 -->  <Component-a msgfromfather='you die!'></Component-a> </div></template><script>import Store from './store'import ComponentA from './components/componentA'  //该组件会被加载到该页面export default { name: 'app', data () {  return {   title: 'this is a todo list',   items:Store.fetch(),   newItem:''  } }, components:{ //注册组件  ComponentA }, watch:{   items:{    handler(items){   //经过变化的数组会作为第一个参数传入     Store.save(items)    },    deep:true    //深度复制   } }, methods:{  toogleFinish(item){   item.isFinished = !item.isFinished  },  addNew(){   this.items.push({    label:this.newItem,    isFinished:false,   })   this.newItem = ''  } }}</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;}.finished{ text-decoration: underline;}</style>

<template> <div class="hello">  <h1>{{msg}}</h1>  <h2>{{msgfromfather}}</h2>  <button v-on:click="onClickMe">Click!</button> </div></template><<script>export default { data(){   return{     msg:'Hello form component a'   } }, props:['msgfromfather'],//自组件接收数据 methods:{   onClickMe(){     console.log(this.msgfromfather);   } }}</script><style scoped></style>