Nilai lulus komponen Vue dengan cara berikut: 1. Lulus daripada bapa kepada anak lelaki; 3. Lulus nilai daripada abang; . Gunakan "$ref" untuk menghantar Nilai; 10. Nilai hantar ke sessionStorage; 11. vuex.
1. Hantar komponen induk kepada komponen anak
Tentukan prop dalam komponen anak, iaitu props:['msg'], msg boleh menjadi objek atau jenis data asas
anda ingin mentakrifkan nilai Lalai, iaitu props: {msg: {type: String, default: 'hello world'}},
Jika nilai lalai ialah jenis objek: props: { msg: { type: Object , lalai: () => { return { name: 'dan_seek' } } }}
Perlu diambil perhatian bahawa pemindahan nilai ini adalah sehala, anda tidak boleh menukar nilai komponen induk (kecuali untuk jenis rujukan kursus); dan jika anda mengubah suai secara langsung nilai prop, amaran.
Cara penulisan yang disyorkan ialah mentakrifkan semula pembolehubah dalam data() (lihat Children.vue) dan menetapkan prop padanya, sudah tentu, sifat yang dikira juga boleh diterima.
Children.vue
<template>
<section>
父组件传过来的消息是：{{myMsg}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
props:['msg'],
data() {
return {
myMsg:this.msg
}
},
methods: {}
}
</script>Parent.vue
<template>
<div class="parent">
<Children :msg="message"></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children
},
data() {
return {
message:'hello world'
}
},
}
</script>2 Hantar komponen anak kepada komponen induk
Anda perlu menggunakan acara tersuai di sini, gunakan ini.$emit('myEvent') untuk mencetuskannya dalam komponen anak, dan kemudian dalam komponen induk Gunakan pemantauan @myEvent dalam komponen
Children.vue
<template>
<section>
<br>
<div @click="clickme">click me</div>
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
childNum:0
}
},
methods: {
clickme(){
// 通过自定义事件addNum把值传给父组件
this.$emit('addNum',this.childNum++)
}
}
}
</script>Parent.vue
<template>
<div class="parent">
这里是计数：{{parentNum}}
<Children-Com @addNum="getNum"></Children-Com>
</div>
</template>
<script>
import ChildrenCom from '../components/Children'
export default {
name: 'Parent',
components: {
ChildrenCom
},
data() {
return {
parentNum: 0
}
},
methods:{
// childNum是由子组件传入的
getNum(childNum){
this.parentNum = childNum
}
}
}
</script>3 Pindahkan nilai antara komponen adik beradik
Gunakan keupayaan pencetus dan pemantauan acara tersuai. memancarkan untuk mentakrifkan acara bas acara awam, yang melaluinya Sebagai jambatan perantaraan, kita boleh menghantar nilai kepada mana-mana komponen. Dan melalui penggunaan eventBus, anda boleh memperdalam pemahaman anda tentang emit.
EventBus.js
import Vue from 'vue'export default new Vue()
Children1.vue
<template> <section> <div @click="pushMsg">push message</div> <br> </section></template><script> import eventBus from './EventBus' export default { name: "Children1", components: {}, data() { return { childNum:0 } }, methods: { pushMsg(){ // 通过事件总线发送消息 eventBus.$emit('pushMsg',this.childNum++) } } }</script>Children2.vue
<template>
<section>
children1传过来的消息：{{msg}}
</section>
</template>
<script>
import eventBus from './EventBus'
export default {
name: "Children2",
components: {},
data() {
return {
msg: ''
}
},
mounted() {
// 通过事件总线监听消息
eventBus.$on('pushMsg', (children1Msg) => {
this.msg = children1Msg
})
}
}
</script>Parent.vue
<template>
<div class="parent">
<Children1></Children1>
<Children2></Children2>
</div>
</template>
<script>
import Children1 from '../components/Children1'
import Children2 from '../components/Children2'
export default {
name: 'Parent',
components: {
Children1,
Children2
},
data() {
return {
}
},
methods:{
}
}
</script>Terdapat juga perpustakaan vue-bus sumber terbuka di github, anda boleh merujuknya: https://github.com/yangmingshan/vue -bus#readme
4. Lulus nilai antara laluan
i Gunakan tanda soal untuk lulus nilai
Gunakan ini.$router.push('/B?name=danseek') apabila halaman A melompat ke halaman B.
B halaman boleh menggunakan $route.query.name untuk mendapatkan nilai yang dihantar dari halaman A
Sila ambil perhatian perbezaan antara penghala dan laluan di atas
ii
{
path: '/b/:name',
name: 'b',
component: () => import( '../views/B.vue')
},<router-view :type="type"></router-view>
// 子页面
......
props: ['type']
......
watch: {
type(){
// console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
},
},Gunakan keupayaan $ref untuk menentukan ID untuk komponen anak Komponen induk boleh mengakses secara langsung kaedah dan sifat dalam komponen anak melalui ID ini
<template>
<section>
传过来的消息：{{msg}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
msg: '',
desc:'The use of ref'
}
},
methods:{
// 父组件可以调用这个方法传入msg
updateMsg(msg){
this.msg = msg
}
},
}
</script>
<template>
<div class="parent">
<!-- 给子组件设置一个ID ref="children" -->
<Children ref="children"></Children>
<div @click="pushMsg">push message</div>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'parent',
components: {
Children,
},
methods:{
pushMsg(){
// 通过这个ID可以访问子组件的方法
this.$refs.children.updateMsg('Have you received the clothes？')
// 也可以访问子组件的属性
console.log('children props:',this.$refs.children.desc)
}
},
}
</script>provide: function () {
return {
getName: this.getName()
}
}inject: ['getName']
<template>
<div class="parent">
<Children></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children,
},
data() {
return {
name:'dan_seek'
}
},
provide: function () {
return {
getName: this.name
}
},
}
</script>
父组件传入的值：{{getName}}
<script>
export default {
name: "Children",
components: {},
data() {
return {
}
},
inject: [&#39;getName&#39;],
}
</script><template>
<section>
<parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
</section>
</template>
<script>
import Parent from './Parent'
export default {
name: "GrandParent",
components: {
Parent
},
data() {
return {}
},
methods: {
sayKnow(val){
console.log(val)
}
},
mounted() {
}
}
</script>Nama datuk: grandParentNama datuk
Jantina datuk: Lelaki
Umur datuk: 88
Hobi datuk: kod
8, moyang cucu
Dengan bantuan $listeners middle Events, cucu boleh memberitahu nenek moyang dengan mudah untuk contoh kod, lihat 7
9 contoh komponen melalui induk, dan kemudian anda boleh mengakses sifat dan kaedah komponen induk melalui contoh ini Ia juga mempunyai akar saudara Anda boleh mendapatkan contoh komponen akar.
Sintaks:
<template>
<section>
<p>父组件收到</p>
<p>祖父的名字：{{name}}</p>
<children v-bind="$attrs" v-on="$listeners"></children>
</section>
</template>
<script>
import Children from './Children'
export default {
name: "Parent",
components: {
Children
},
// 父组件接收了name,所以name值是不会传到子组件的
props:['name'],
data() {
return {}
},
methods: {},
mounted() {
}
}
</script>Jadi, dalam contoh menghantar komponen anak kepada komponen induk, anda boleh menggunakan ini.$parent.getNum(100) untuk menghantar nilai kepada komponen induk.
10. Pemindahan nilai SessionStorage
sessionStorage ialah objek global penyemak imbas, dan data yang disimpan di dalamnya akan dikosongkan apabila halaman ditutup. Menggunakan ciri ini, kami boleh berkongsi salinan data merentas semua halaman.
Sintaks:
<template>
<section>
<p>子组件收到</p>
<p>祖父的名字：{{name}}</p>
<p>祖父的性别：{{sex}}</p>
<p>祖父的年龄：{{age}}</p>
<p>祖父的爱好：{{hobby}}</p>
<button @click="sayKnow">我知道啦</button>
</section>
</template>
<script>
export default {
name: "Children",
components: {},
// 由于父组件已经接收了name属性，所以name不会传到子组件了
props:['sex','age','hobby','name'],
data() {
return {}
},
methods: {
sayKnow(){
this.$emit('sayKnow','我知道啦')
}
},
mounted() {
}
}
</script>Nota: Ia menyimpan pasangan nilai kunci, yang hanya boleh daripada jenis rentetan Jika anda ingin menyimpan objek, anda perlu menggunakan let objStr = JSON.stringify(obj) untuk menukarnya menjadi rentetan dan. kemudian simpannya (gunakan apabila biarkan obj = JSON.parse(objStr) menghuraikan ke dalam objek).
Adakah menyusahkan untuk menyimpan objek seperti ini, saya mengesyorkan storan baik perpustakaan, yang merangkum sessionStorage, dan anda boleh terus menggunakan APInya untuk menyimpan objek
// 获父组件的数据 this.$parent.foo // 写入父组件的数据 this.$parent.foo = 2 // 访问父组件的计算属性 this.$parent.bar // 调用父组件的方法 this.$parent.baz()
11, vuex
Saya tidak akan memperkenalkan cara menggunakan vuex terkenal ini di sini, kerana ia akan menjadi terlalu panjang untuk menulisnya dengan jelas...
Jika anda tidak bercadang untuk membangunkan aplikasi satu halaman yang besar, menggunakan Vuex mungkin menyusahkan dan berlebihan. Memang benar - jika apl anda cukup mudah, anda mungkin tidak perlu menggunakan Vuex.
Atas ialah kandungan terperinci Bagaimana untuk menghantar nilai kepada komponen vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
