Implementierungsmethode der übergeordneten Übergabe von Parametern an untergeordnete Komponenten von vue.js

1. Erstellen Sie eine neue KomponenteA.vue-Komponente mit dem folgenden Code:

Store.js-Code lautet wie folgt:

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));
  }
}

App.vue-Code lautet wie folgt :

<template>
 <p 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=&#39;toogleFinish(item)&#39;>
    {{item.label}}
   </li>
  </ul>
  <!-- 使用组件，注意驼峰命名法转化成短线 -->
  <!-- 向自组件传数据 -->
  <Component-a msgfromfather=&#39;you die!&#39;></Component-a>
 </p>
</template>
<script>
import Store from &#39;./store&#39;
import ComponentA from &#39;./components/componentA&#39;  //该组件会被加载到该页面
export default {
 name: &#39;app&#39;,
 data () {
  return {
   title: &#39;this is a todo list&#39;,
   items:Store.fetch(),
   newItem:&#39;&#39;
  }
 },
 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 = &#39;&#39;
  }
 }
}
</script>
<style>
#app {
 font-family: &#39;Avenir&#39;, 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>

componentA.vue-Code lautet wie folgt:

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

Der Effekt nach dem Klicken auf die Schaltfläche ist wie folgt:

Zusammenfassung

Das obige ist der detaillierte Inhalt vonImplementierungsmethode der übergeordneten Übergabe von Parametern an untergeordnete Komponenten von vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!