• <pre id="y08ey"><del id="y08ey"><xmp id="y08ey"></xmp></del></pre>
    1. <pre id="y08ey"></pre>
      
      <p id="y08ey"><strong id="y08ey"><small id="y08ey"></small></strong></p>
      <td id="y08ey"><ruby id="y08ey"></ruby></td>
      <p id="y08ey"><strong id="y08ey"><xmp id="y08ey"></xmp></strong></p>
      <pre id="y08ey"></pre>

      <table id="y08ey"></table>
        <track id="y08ey"></track>
      1. 手機: 18919834768
        電話熱線: 0931-7603702
        網站知識
        當前位置: 主頁 > 網站知識

        vue3組件Prop通信

        發布時間:2023-02-23 11:22:26???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        1.實際問題
        2.數據父傳子
        本節課我們來開始學習 Vue3.x 的組件中父組件給子組件傳遞數據的方法。
        一.實際問題
        1. 根組件(父組件)data()數據,子組件在目前的知識是無法獲取的;
        2. 我們如果想要子組件和父組件同時正確的獲取數據,采用如下方法:
        // 定義一個局部組件
        const htmlA = {
        // 數據
        data() {
        return {
        message : '子組件-Vue3.x~'
        }
        },
        // 模板
        template : `
        {{message}}
        `
        }
        // 創建一個 Vue 應用實例,這個本身也是一個組件,根組件,最頂層的
        const app = Vue.createApp({
        data() {
        return {
        message : '父組件-Vue3.x~'
        }
        },
        // 創建一個局部組件,也是一個子組件
        components : {
        'html-a' : htmlA
        }
        })
        <div id="app">
        <html-a>html-a>
        div>
        PS:上面的例子中暴露的問題,就是子組件無法直接使用父組件的 message 屬性;
        PS:所以只能在 HTML 端進行設計,但這樣做,父組件的內容無法和子組件參與邏輯;
        <div id="app">
        <div>{{message}}div>
        <html-a>html-a>
        div>
        二.數據父傳子
        1. 根據上面的問題,我們最好是能夠直接從子組件獲取到父組件的數據內容;
        2. 這時,Vue3.x 提供了一個 props 來獲取父組件給子組件傳遞的值;
        // 定義一個局部組件
        const htmlA = {
        // 數據
        data() {
        return {
        message : '子組件-Vue3.x~'
        }
        },
        // props
        props : ['abc'],
        // 模板
        template : `
        {{abc}}
        {{message}}
        `
        }
        <div id="app">
        <html-a v-bind:abc="message">html-a>
        div>
        PSprops 里定義數組,表示可以定義多個;在 HTML 端使用 v-bind:abc 來獲取父組件對應值;
        PS:這里采用了 abc 表示 props 的元素名稱可以自定義,如果定義成 parent-message,則:
        props : ['parentMessage'],
        // 模板
        template : `
        {{parentMessage}}
        {{message}}
        `
        <html-a v-bind:parent-message="message">html-a>
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

        建站咨詢 售前咨詢 私人訂制 售后技術

        ? 電話咨詢

        0931-7603702
        (早9:00-晚10:00)

        ? 微信咨詢

        掃碼關注
        點點租

        ? 返回頂部
        午夜无码区在线观看_久久精品国产亚洲一区二区_久久综合日本久久综合88_在线观看国产一区