Rumah hujung hadapan web tutorial js vue.js父子组件传参详细介绍

vue.js父子组件传参详细介绍

Apr 16, 2018 am 11:02 AM
javascript vue.js memperkenalkan

这次给大家带来vue.js父子组件传参详细介绍,vue.js父子组件传参的注意事项有哪些,下面就是实战案例,一起来看一下。

1.新建componentA.vue组件,代码如下:

store.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));
  }
}
Salin selepas log masuk

App.vue代码如下:

<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>
Salin selepas log masuk

componentA.vue代码如下:

<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>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:



Atas ialah kandungan terperinci vue.js父子组件传参详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pengenalan terperinci tentang apa itu wapi Pengenalan terperinci tentang apa itu wapi Jan 07, 2024 pm 09:14 PM

Pengguna mungkin pernah melihat istilah wapi apabila menggunakan Internet, tetapi bagi sesetengah orang mereka pasti tidak tahu apa itu wapi Berikut adalah pengenalan terperinci untuk membantu mereka yang tidak tahu untuk memahami. Apa itu wapi: Jawapan: wapi ialah infrastruktur untuk pengesahan dan kerahsiaan LAN wayarles. Ini seperti fungsi seperti inframerah dan Bluetooth, yang biasanya dilindungi berhampiran tempat seperti bangunan pejabat. Pada asasnya mereka dimiliki oleh jabatan kecil, jadi skop fungsi ini hanya beberapa kilometer. Pengenalan berkaitan wapi: 1. Wapi ialah protokol penghantaran dalam LAN wayarles. 2. Teknologi ini dapat mengelakkan masalah komunikasi jalur sempit dan membolehkan komunikasi yang lebih baik. 3. Hanya satu kod diperlukan untuk menghantar isyarat

Penjelasan terperinci sama ada win11 boleh menjalankan permainan PUBG Penjelasan terperinci sama ada win11 boleh menjalankan permainan PUBG Jan 06, 2024 pm 07:17 PM

Pubg, juga dikenali sebagai PlayerUnknown's Battlegrounds, ialah permainan shooting battle royale yang sangat klasik yang telah menarik ramai pemain sejak popularitinya pada 2016. Selepas pelancaran sistem win11 baru-baru ini, ramai pemain ingin memainkannya di win11 Jom ikuti editor untuk melihat sama ada win11 boleh bermain pubg. Bolehkah win11 bermain pubg? 1. Pada permulaan win11, kerana win11 perlu untuk membolehkan tpm, ramai pemain telah diharamkan dari pubg. 2. Walau bagaimanapun, berdasarkan maklum balas pemain, Blue Hole telah menyelesaikan masalah ini, dan kini anda boleh bermain pubg seperti biasa dalam win11. 3. Kalau jumpa pub

Pengenalan terperinci sama ada pemproses i5 boleh memasang win11 Pengenalan terperinci sama ada pemproses i5 boleh memasang win11 Dec 27, 2023 pm 05:03 PM

i5 ialah siri pemproses yang dimiliki oleh Intel Ia mempunyai pelbagai versi generasi ke-11 i5, dan setiap generasi mempunyai prestasi yang berbeza. Oleh itu, sama ada pemproses i5 boleh memasang win11 bergantung pada generasi pemproses itu Mari ikuti editor untuk mempelajarinya secara berasingan. Bolehkah pemproses i5 dipasang dengan win11: Jawapan: pemproses i5 boleh dipasang dengan win11. 1. Pemproses i51 generasi kelapan dan seterusnya, generasi kelapan dan i5 seterusnya boleh memenuhi keperluan konfigurasi minimum Microsoft. 2. Oleh itu, kita hanya perlu memasuki laman web Microsoft dan memuat turun "Win11 Installation Assistant" 3. Selepas muat turun selesai, jalankan pembantu pemasangan dan ikut arahan untuk memasang Win11. 2. i51 sebelum generasi kelapan dan selepas generasi kelapan

Memperkenalkan kaedah penalaan bunyi Win 11 terkini Memperkenalkan kaedah penalaan bunyi Win 11 terkini Jan 08, 2024 pm 06:41 PM

Selepas mengemas kini kepada win11 terkini, ramai pengguna mendapati bahawa bunyi sistem mereka telah berubah sedikit, tetapi mereka tidak tahu bagaimana untuk menyesuaikannya Jadi hari ini laman web ini membawakan anda pengenalan kepada kaedah pelarasan bunyi win11 terkini untuk komputer anda. Ia tidak sukar untuk dikendalikan dan pilihannya pelbagai, datang dan muat turun dan cuba. Cara melaraskan bunyi sistem komputer terkini Windows 11 1. Mula-mula, klik kanan ikon bunyi di sudut kanan bawah desktop dan pilih "Tetapan Main Semula". 2. Kemudian masukkan tetapan dan klik "Speaker" dalam bar main balik. 3. Kemudian klik "Properties" di bahagian bawah sebelah kanan. 4. Klik bar pilihan "Tingkatkan" dalam sifat. 5. Pada masa ini, jika √ di hadapan "Lumpuhkan semua kesan bunyi" ditandakan, batalkannya. 6. Selepas itu, anda boleh memilih kesan bunyi di bawah untuk ditetapkan dan klik

Pengenalan kepada kemahiran dan sifat Hua Yishan Heart of the Moon Lu Shu Pengenalan kepada kemahiran dan sifat Hua Yishan Heart of the Moon Lu Shu Mar 23, 2024 pm 05:30 PM

Di Hua Yishan Heart Moon, Lu Shu ialah seorang selebriti SSR. Dia diletakkan sebagai pendayung belakang tunggal dan mempunyai kadar pukulan kritikal yang sangat mengagumkan. Datang dan lihat pengenalan kepada kemahiran dan sifat Hua Yishan Heart of the Moon Lu Shu. Atribut Selebriti Kemahiran Selebriti 1. Lu Ming Shuzhong Penerangan Kemahiran: Lu Shu dilahirkan di Qiongqihui di Shuzhong Dia telah berlatih seni mempertahankan diri sejak dia masih kecil dan mempunyai kemahiran seni mempertahankan diri yang cemerlang. Menyebabkan kerosakan serangan asas sama dengan 100% kuasa serangan barisan belakang musuh, dan mengurangkan kemarahan sasaran sebanyak 10 mata. Atribut kemahiran: Tahap 2: Kerosakan serangan asas meningkat kepada 105%. Tahap 2: Kerosakan serangan asas dinaikkan kepada 110%, dan kemarahan sasaran dikurangkan sebanyak 15 mata. Tahap 2: Kerosakan serangan asas meningkat kepada 115%. Tahap 2: Kerosakan serangan asas dinaikkan kepada 120%, dan kemarahan sasaran dikurangkan sebanyak 20 mata. Tahap 2: Serangan asas

Panduan Pemula PyCharm: Analisis Komprehensif Fungsi Penggantian Panduan Pemula PyCharm: Analisis Komprehensif Fungsi Penggantian Feb 25, 2024 am 11:15 AM

PyCharm ialah persekitaran pembangunan bersepadu Python yang berkuasa dengan fungsi dan alatan yang kaya yang boleh meningkatkan kecekapan pembangunan dengan ketara. Antaranya, fungsi penggantian merupakan salah satu fungsi yang kerap digunakan dalam proses pembangunan, yang boleh membantu pembangun mengubah suai kod dengan cepat dan meningkatkan kualiti kod. Artikel ini akan memperkenalkan fungsi gantian PyCharm secara terperinci, digabungkan dengan contoh kod khusus, untuk membantu orang baru menguasai dan menggunakan fungsi ini dengan lebih baik. Pengenalan kepada fungsi gantian Fungsi gantian PyCharm boleh membantu pembangun dengan cepat menggantikan teks yang ditentukan dalam kod

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Maklumat terperinci tentang lokasi pemacu pencetak pada komputer anda Maklumat terperinci tentang lokasi pemacu pencetak pada komputer anda Jan 08, 2024 pm 03:29 PM

Ramai pengguna memasang pemacu pencetak pada komputer mereka tetapi tidak tahu cara mencarinya. Oleh itu, hari ini saya membawakan anda pengenalan terperinci mengenai lokasi pemacu pencetak dalam komputer Bagi mereka yang belum tahu, mari kita lihat di mana untuk mencari pemacu pencetak Apabila menulis semula kandungan tanpa mengubah maksud asal. anda perlu Bahasa ditulis semula ke bahasa Cina, dan ayat asal tidak perlu muncul Pertama, adalah disyorkan untuk menggunakan perisian pihak ketiga untuk mencari 2. Cari "Kotak Alat" di sudut kanan atas klik "Pengurus Peranti" di bawah. Ayat yang ditulis semula: 3. Cari dan klik "Pengurus Peranti" di bahagian bawah 4. Kemudian buka "Print Queue" dan cari peranti pencetak anda. Kali ini ialah nama dan model pencetak anda. 5. Klik kanan peranti pencetak dan anda boleh mengemas kini atau menyahpasangnya.

See all articles