详解vue组件父与子通信（一）
本文主要为大家详细介绍了vue组件父与子通信详解，实现登录窗口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望可以帮助到大家。
一、组件间通信（父组件 --> 子组件）
步骤：
①父组件在调用子组件 传值
<child-component myValue="123"> </child-component>
②在子组件中 获取父组件传来的值
Vue.component('child-component',{
props:['myValue'],
template:''
})代码1：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>父传子</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</p>
<script>
// 在vue中一切都是组件
//父传子
Vue.component("parent-component",{
data:function(){
return {
gift:"传家宝"
}
},
template:`
<p>
<h1>这是父组件</h1>
<hr>
<child-component v-bind:myValue="gift"></child-component>
</p>
`
})
Vue.component("child-component",{
props:["myValue"],
template:`
<p>
<h1>这是子组件</h1>
<p>{{"父传递的值："+myValue}}</p>
</p>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>myValue是属性名，必须都一样……拿data中的用v-bind:或者：
props是property属性,是个数组
代码2：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>父子之间通信练习</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<my-login></my-login>
</p>
<script>
/*
登录窗口
创建4个组件，分别是my-label my-input my-button my-login(复合组件)
*/
Vue.component("my-label",{
props:["myLabel"],
template:`
<p>
<label>{{myLabel}}</label>
</p>
`
})
Vue.component("my-input",{
template:`
<p>
<input type="text"/>
</p>
`
})
Vue.component("my-button",{
props:["myButton"],
template:`
<p>
<button>{{myButton}}</button>
</p>
`
})
//复合组件
Vue.component("my-login",{
data:function(){
return {
uname:"用户名",
upwd:"密码",
login:"登录",
register:"注册"
}
},
template:`
<p>
<my-label v-bind:myLabel="uname"></my-label>
<my-input></my-input>
<my-label v-bind:myLabel="upwd"></my-label>
<my-input></my-input>
<my-button v-bind:myButton="login"></my-button>
<my-button v-bind:myButton="register"></my-button>
</p>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>代码3：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<p id="container">
<my-login></my-login>
</p>
<script>
Vue.component('my-label',{
props:['labelName'],
template:'<label>{{labelName}}</label>'
})
Vue.component('my-input',{
props:['tips'],
template:'<input type="text" :placeholder="tips"/>'
})
Vue.component('my-button',{
props:['btnName'],
template:'<button>{{btnName}}</button>'
})
Vue.component('my-login',{
template:`
<form>
<my-label labelName="用户名"></my-label>
<my-input tips="请输入用户名"></my-input>
<br/>
<my-label labelName="密码"></my-label>
<my-input tips="请输入密码"></my-input>
<br/>
<my-button btnName="登录"></my-button>
<my-button btnName="注册"></my-button>
</form>
`
})
new Vue({
el: '#container',
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>要拿到data中的数据就要v-bind,否则就不用。
相关推荐：
Atas ialah kandungan terperinci 详解vue组件父与子通信（一）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Generasi baharu teknologi jalur lebar gentian optik - 50G PON
Apr 20, 2024 pm 09:22 PM
Dalam artikel (pautan) sebelum ini, Xiao Zaojun memperkenalkan sejarah pembangunan teknologi jalur lebar daripada ISDN, xDSL kepada 10GPON. Hari ini, mari kita bercakap tentang generasi baharu teknologi jalur lebar gentian optik-50GPON yang akan datang. █F5G dan F5G-A Sebelum memperkenalkan 50GPON, mari kita bincangkan dahulu tentang F5G dan F5G-A. Pada Februari 2020, ETSI (European Telecommunications Standards Institute) mempromosikan sistem teknologi rangkaian komunikasi tetap berdasarkan 10GPON+FTTR, Wi-Fi6, transmisi/pengagregatan optik 200G, OXC dan teknologi lain, dan menamakannya F5G. Itu merupakan generasi kelima tetap teknologi komunikasi rangkaian (The5thgenerationFixednetworks). F5G ialah rangkaian tetap
Penjelasan terperinci tentang mendapatkan hak pentadbir dalam Win11
Mar 08, 2024 pm 03:06 PM
Sistem pengendalian Windows ialah salah satu sistem pengendalian yang paling popular di dunia, dan versi baharunya Win11 telah menarik perhatian ramai. Dalam sistem Win11, mendapatkan hak pentadbir adalah operasi penting Hak pentadbir membolehkan pengguna melakukan lebih banyak operasi dan tetapan pada sistem. Artikel ini akan memperkenalkan secara terperinci cara mendapatkan kebenaran pentadbir dalam sistem Win11 dan cara mengurus kebenaran dengan berkesan. Dalam sistem Win11, hak pentadbir dibahagikan kepada dua jenis: pentadbir tempatan dan pentadbir domain. Pentadbir tempatan mempunyai hak pentadbiran penuh ke atas komputer tempatan
Penjelasan terperinci tentang operasi bahagian dalam Oracle SQL
Mar 10, 2024 am 09:51 AM
Penjelasan terperinci tentang operasi bahagi dalam OracleSQL Dalam OracleSQL, operasi bahagi ialah operasi matematik yang biasa dan penting, digunakan untuk mengira hasil pembahagian dua nombor. Bahagian sering digunakan dalam pertanyaan pangkalan data, jadi memahami operasi bahagian dan penggunaannya dalam OracleSQL adalah salah satu kemahiran penting untuk pembangun pangkalan data. Artikel ini akan membincangkan pengetahuan berkaitan operasi bahagian dalam OracleSQL secara terperinci dan menyediakan contoh kod khusus untuk rujukan pembaca. 1. Operasi bahagian dalam OracleSQL
Sejarah pembangunan tetikus tanpa wayar
Jun 12, 2024 pm 08:52 PM
Tajuk asal: "Bagaimanakah tetikus wayarles menjadi wayarles?" 》Tetikus wayarles secara beransur-ansur menjadi ciri standard komputer pejabat hari ini, kita tidak perlu lagi menyeret kord panjang. Tetapi, bagaimanakah tetikus wayarles berfungsi? Hari ini kita akan belajar tentang sejarah pembangunan tetikus wayarles No.1 Tahukah anda bahawa tetikus wayarles kini berusia 40 tahun Pada tahun 1984, Logitech membangunkan tetikus wayarles pertama di dunia, tetapi tetikus wayarles ini menggunakan inframerah sebagai isyarat? pembawa dikatakan kelihatan seperti gambar di bawah, tetapi kemudiannya gagal kerana sebab prestasi. Sehingga tahun 1994, sepuluh tahun kemudian, Logitech akhirnya berjaya membangunkan tetikus wayarles yang berfungsi pada 27MHz Frekuensi 27MHz ini juga menjadi tetikus tanpa wayar untuk masa yang lama.
Komponen sudut dan sifat paparannya: memahami lalai bukan blok
Mar 15, 2024 pm 04:51 PM
Tingkah laku paparan lalai untuk komponen dalam rangka kerja Angular bukan untuk elemen peringkat blok. Pilihan reka bentuk ini menggalakkan pengkapsulan gaya komponen dan menggalakkan pembangun untuk secara sedar menentukan cara setiap komponen dipaparkan. Dengan menetapkan paparan sifat CSS secara eksplisit, paparan komponen Sudut boleh dikawal sepenuhnya untuk mencapai reka letak dan responsif yang diingini.
Penjelasan terperinci tentang peranan dan penggunaan pengendali modulo PHP
Mar 19, 2024 pm 04:33 PM
Operator modulo (%) dalam PHP digunakan untuk mendapatkan baki pembahagian dua nombor. Dalam artikel ini, kami akan membincangkan peranan dan penggunaan pengendali modulo secara terperinci, dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Peranan pengendali modulo Dalam matematik, apabila kita membahagi integer dengan integer lain, kita mendapat hasil bagi dan baki. Sebagai contoh, apabila kita membahagi 10 dengan 3, hasil bahagi ialah 3 dan selebihnya ialah 1. Operator modulo digunakan untuk mendapatkan baki ini. 2. Penggunaan operator modulo Dalam PHP, gunakan simbol % untuk mewakili modulus
Sejarah ringkas teknologi Internet jalur lebar
Apr 16, 2024 am 09:00 AM
Dalam era digital hari ini, jalur lebar telah menjadi satu keperluan bagi setiap daripada kita dan setiap keluarga. Tanpanya, kita akan resah dan gelisah. Jadi, adakah anda tahu prinsip teknikal di sebalik jalur lebar? Daripada dial-up 56k "kucing" terawal ke bandar Gigabit semasa dan rumah Gigabit, apakah jenis perubahan yang telah dialami oleh teknologi jalur lebar kami? Dalam artikel hari ini, mari kita lihat dengan lebih dekat "Kisah Jalur Lebar". Pernahkah anda melihat antara muka ini antara █xDSL dan ISDN? Saya percaya ramai rakan-rakan yang lahir pada tahun 70-an dan 80-an pasti pernah melihatnya dan sangat mengenalinya. Betul, ini adalah antara muka untuk "dial-up" semasa kami mula-mula bersentuhan dengan Internet. Itu lebih daripada 20 tahun yang lalu, ketika Xiao Zaojun masih di kolej. Untuk melayari Internet, saya
Penjelasan terperinci tentang fungsi sistem panggilan sistem linux().
Feb 22, 2024 pm 08:21 PM
Penjelasan terperinci tentang fungsi sistem panggilan sistem Linux() Panggilan sistem ialah bahagian yang sangat penting dalam sistem pengendalian Linux Ia menyediakan cara untuk berinteraksi dengan kernel sistem. Antaranya, fungsi system() adalah salah satu fungsi panggilan sistem yang biasa digunakan. Artikel ini akan memperkenalkan penggunaan fungsi system() secara terperinci dan memberikan contoh kod yang sepadan. Konsep Asas Panggilan Sistem Panggilan sistem ialah satu cara untuk atur cara pengguna berinteraksi dengan kernel sistem pengendalian. Program pengguna meminta sistem pengendalian dengan memanggil fungsi panggilan sistem
