Introduction détaillée au passage de paramètres dans les composants parent-enfant de vue.js

Cette fois, je vais vous apporter une introduction détaillée au passage de paramètres dans le composant parent-enfant vue.js. Quelles sont les précautions pour passer des paramètres dans le composant parent-enfant vue.js. un cas pratique, jetons un coup d'oeil.

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

Le code store.js est le 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>
 <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 './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>

Le code de composantA.vue est le suivant :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !

Lecture recommandée :

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!