Comment transmettre des paramètres du composant parent au composant enfant dans vue.js

Ce que je vous apporte cette fois, c'est comment transmettre les paramètres des composants parent aux composants enfants dans vue.js. Cet article vous donnera une bonne analyse.

1. Créez un nouveau composant componentA.vue avec le code suivant :

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

Le code App.vue est le suivant :

<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=&#39;toogleFinish(item)&#39;>
    {{item.label}}
   </li>
  </ul>
  <!-- 使用组件，注意驼峰命名法转化成短线 -->
  <!-- 向自组件传数据 -->
  <Component-a msgfromfather=&#39;you die!&#39;></Component-a>
 </div>
</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>

Le code du composantA.vue est le suivant :

<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:&#39;Hello form component a&#39;
   }
 },
 props:[&#39;msgfromfather&#39;],//自组件接收数据
 methods:{
   onClickMe(){
     console.log(this.msgfromfather);
   }
 }
}
</script>
<style scoped>
</style>

Je crois que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus .Pour des informations plus intéressantes, veuillez prêter attention aux autres sites Web chinois php Articles connexes !

Lecture connexe :

Comment utiliser les instructions personnalisées de Vue pour compléter un menu déroulant

Comment utiliser JS pour cliquer pour accéder à la boîte aux lettres personnelle connectée

Comment nvm gère les différentes versions de node

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!