多執行緒程式設計學習五(執行緒池的建立)
阿新 • • 發佈:2022-05-04
1、父子通訊props
父元件控制自己的data,通過props將資料傳遞給子元件,子元件使用父元件傳遞的資料,元件要使用自定義屬性,必須要在props裡邊進行宣告,通過props宣告的屬性可以在this裡獲取到,props裡的資料和data裡的資料的用法一樣,
為了保證資料的單向流動性,props裡的資料只能使用,不能修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> <style> .son { width: 100px; height: 100px; background: red; }</style> </head> <body> <div id="app"> <father></father> </div> <!-- 父元件 --> <template id="father"> <div> <button @click="toggle">toggle</button> 這裡是父元件 <hr> <!-- 通過自定義屬性將資料傳遞給子元件 --> <son :fathershow="show"></son> </div> </template> <!-- 子元件 --> <template id="son"> <div> 這裡是子元件<div v-show='fathershow' class="son"></div> </div> </template> <script> Vue.component('father', { template: '#father', data() { return{ show: true } }, methods: { toggle() { this.show =!this.show } } }) Vue.component('son', { template: '#son', props: ['fathershow'], data() { return { // show: false, } }, mounted() { console.log(this) } }) new Vue({}).$mount('#app') /* 子元件有一個div 父元件控制div的顯示隱藏 父元件控制自己的data資料,然後通過props 將資料傳遞給子元件,子元件使用父元件傳遞的資料 元件要使用自定義屬性必須通過props宣告,通過props宣告的資料可以在this裡獲取到 props裡的資料和data裡的資料用法一樣 props裡的資料為了保證資料的單項流動 只能使用不能修改 */ </script>