VUE組件之間的傳值

我們先快速搭建父子組件

子組件

    <template> 
        <div> 
                <h3 style="color:red">I am  Son</h3>
        </div>
    </template>

    <script>
    export default {

    }
    </script>

    <style>

    </style>

父組件

    <template>
        <div>
            <h2>I  am  father</h2>
            <test></test>
        </div>
    </template>

    <script>
    import test from './Test'
    export default {
    components:{
        test
    }
    }
    </script>

    <style>

    </style>

先定義值并傳遞給子組件

    export default {
       data(){
          return{
             name:'father'
          }
        },
        components:{
            test
        }
    }

這邊捎帶提一下為什么data規(guī)定是一個(gè)函數(shù)而不是對(duì)象

Object是引用數(shù)據(jù)類(lèi)型,如果不用function 返回,每個(gè)組件的data 都是內(nèi)存的同一個(gè)地址,一個(gè)數(shù)據(jù)改變了其他也改變了

javascipt只有函數(shù)構(gòu)成作用域(注意理解作用域,只有函數(shù)的{}構(gòu)成作用域,對(duì)象的{}以及 if(){}都不構(gòu)成作用域)，data是一個(gè)函數(shù)時(shí)，每個(gè)組件實(shí)例都有自己的作用域，每個(gè)實(shí)例相互獨(dú)立,不會(huì)相互影響

如果兩個(gè)實(shí)例同時(shí)引用一個(gè)對(duì)象,那么當(dāng)你修改其中一個(gè)屬性的時(shí)候,另外一個(gè)實(shí)例也會(huì)跟著改;
兩個(gè)實(shí)例應(yīng)該有自己各自的域才對(duì),了解淺拷貝的朋友應(yīng)該很容易理解

往子組件中傳遞參數(shù)，通過(guò)v:bind（縮寫(xiě)：）綁定數(shù)據(jù) 并通過(guò)v-model修改數(shù)據(jù)方便測(cè)試

    <template>
        <div>
            <h2>I  am  father</h2>
            <p>
                <input type="text" v-model="name">
            </p>
            <test :name="name"></test>
        </div>
    </template>

    <script>
    import test from './Test'
    export default {
       data(){
          return{
             name:'father'
          }
        },
    components:{
        test
    }
    }
    </script>

    <style>

    </style>

在子組件中通過(guò)props接受 并可以直接使用插值表達(dá)式顯示值

    <template>
        <div> 
                <h3 style="color:red">I am  Son</h3>
                {{name}}
        </div>
    </template>

    <script>
    export default {
        props:['name']
    }
    </script>

    <style>

    </style>

擴(kuò)展props參數(shù)

    export default {
        props:{
            name:{
                type: String,        =>表示數(shù)據(jù)類(lèi)型 如果為null支持一切格式
                default: 0,            =>默認(rèn)值  如果父組件未傳值默認(rèn)的值
                required: true,      =>是否必須傳遞值
                validator: function (value) {    =>自定義驗(yàn)證函數(shù)（充當(dāng)參數(shù)，此處name并不是函數(shù)，所以無(wú)需此參數(shù)）
                   console.log(value)
                }

            }
        }
    }

拆分一下

      props: {
        // 基礎(chǔ)類(lèi)型檢測(cè) (`null` 意思是任何類(lèi)型都可以)
        propA: Number,
        // 多種類(lèi)型
        propB: [String, Number],
        // 必傳且是字符串
        propC: {
        type: String,
        required: true
        },
        // 數(shù)字，有默認(rèn)值
        propD: {
        type: Number,
        default: 100
        },
        // 數(shù)組/對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
        propE: {
        type: Object,
        default: function () {
            return { message: 'hello' }
        }
        },
        // 自定義驗(yàn)證函數(shù)
        propF: {
        validator: function (value) {
            return value > 10
        }
        }
    }
    注意 props 會(huì)在組件實(shí)例創(chuàng)建之前進(jìn)行

根據(jù)傳遞的數(shù)據(jù)類(lèi)型設(shè)置相應(yīng)的參數(shù)，一般情況下只需接收即可

    <script>
    export default {
        props:['name']  =>如有多個(gè)值直接在數(shù)組后方添加即可
    }
    </script>

props參數(shù)接受可直接使用插值表達(dá)式渲染

    <template>
        <div> 
                <h3 style="color:red">I am  Son</h3>
                {{name}}
                <p>
                    <input type="text" v-model="childName">
                </p>
                <p>
                    <button @click="change">change</button>
                </p>
        </div>
    </template>

    <script>
    export default {
        props:['name'],
        data(){
            return{
                childName:'child'
            }
        },
        methods:{
            change(){
                 //childByValue是在父組件on監(jiān)聽(tīng)的方法
                 //第二個(gè)參數(shù)this.childName是需要傳的值
                this.$emit('childByValue',this.childName) =>使用$emit創(chuàng)建方法 將this.childName為數(shù)據(jù)傳遞過(guò)去
            }
        }
    }
    </script>

    <style>

    </style>

父組件接收

        <div>
            <h2>I  am  father</h2>
            <p>
                <input type="text" v-model="name">
            </p>
            <test :name="name" @childByValue="childByValue"></test>  //此處的方法名 與 $emit設(shè)置的方法名相同             
                                         //注意方法是與$emit方法相同 而不是$emit方法與父組件設(shè)置的方法相同  邏輯不能搞錯(cuò)
        </div>
    </template>

    <script>
    import test from './Test'
    export default {
       data(){
          return{
             name:'father'
          }
        },
        methods:{
           childByValue: function (childValue) {  =>此參數(shù)便是 子組件傳遞的參數(shù)  此時(shí)name將修改為子組件傳遞的值
             // childValue就是子組件傳過(guò)來(lái)的值
             this.name = childValue
             }
        },
    components:{
        test
    }
    }
    </script>

    <style>

    </style>

父組件還可以使用$event 修改數(shù)據(jù)

    <template>
        <div>
            <h2>I  am  father</h2>
            <p>
                <input type="text" v-model="name">
            </p>
            <test :name="name" @childByValue="name=$event"></test>  //$event可以理解為傳遞的參數(shù)   效果相同
        </div>
    </template>

    <script>
    import test from './Test'
    export default {
       data(){
          return{
             name:'father'
          }
        },
    components:{
        test
    }
    }
    </script>

    <style>

    </style>

兄弟組件數(shù)據(jù)傳遞

先看一下父組件

    <template>
        <div>
            <h2>I  am  father</h2>
            <p>
                <input type="text" v-model="name">
            </p>
            <hr>
            <test :name="name" @childByValue="name=$event"></test>  =>子組件
            <hr>
            <testone :name="name"></testone> =>子組件
        </div>
    </template>

    <script>
    import test from './Test'
    import testone from './Test1'
    export default {
       data(){
          return{
             name:'father'
          }
        },
    components:{
        test,
        testone
    }
    }
    </script>

    <style>

    </style>

test子組件

    <template>
        <div> 
                <h3 style="color:red">I am  Son</h3>
                {{name}}
                <p>
                    <input type="text" v-model="childName">
                </p>
                <p>
                    <button @click="change">change</button>
                </p>
        </div>
    </template>

    <script>
    export default {
        props:['name'],
        data(){
            return{
                childName:'child'
            }
        },
        methods:{
            change(){
                 // childByValue是在父組件on監(jiān)聽(tīng)的方法
                 // 第二個(gè)參數(shù)this.childName是需要傳的值
                this.$emit('childByValue',this.childName)
            }
        }
    }
    </script>

    <style>

    </style>

testone 子組件

    <template>
        <div> 
                <h3 style="color:red">I am  Son2</h3>
                {{name}}

        </div>
    </template>

    <script>
    export default {
        props:['name']
       
    }
    </script>

    <style>

    </style>

實(shí)現(xiàn)兄弟組件之間數(shù)據(jù)傳遞，不妨礙父組件

在src下新建js，引入vue 暴露實(shí)例

    import Vue from 'Vue'
    export default new Vue()  =>這樣既可

在兄弟組件中導(dǎo)入此實(shí)例 import bus from './../eventBus.js'

首先我們先在傳數(shù)據(jù)的兄弟組件中操作

    <template>
        <div> 
                <h3 style="color:red">I am  Son2</h3>
                {{name}}
                <p>
                    <button @click="change">changeBorther</button>
                </p>
        </div>
    </template>

    <script>
    import bus from './../eventBus.js'
    export default {
        props:['name'],
        methods:{
            change(){
                bus.$emit('changeBortherName','大哥莫慌，我來(lái)了')=>同樣是兩個(gè)參數(shù)
                =>注意此處是bus新vue實(shí)例  不是this
            }
        }
       
    }
    </script>

    <style>

    </style>

在另一個(gè)兄弟組件中監(jiān)聽(tīng)此函數(shù)

    <template>
        <div> 
                <h3 style="color:red">I am  Son</h3>
                {{name}}
                <p>
                    <input type="text" v-model="childName">
                </p>
                <p>
                    <button @click="change">change</button>
                </p>
        </div>
    </template>

    <script>
    import bus from './../eventBus.js'
    export default {
        props:['name'],
        data(){
            return{
                childName:'child'
            }
        },
        methods:{
            change(){
                 // childByValue是在父組件on監(jiān)聽(tīng)的方法
                 // 第二個(gè)參數(shù)this.childName是需要傳的值
                this.$emit('childByValue',this.childName)
            }
        },
        created(){  =>利用vue生命周期函數(shù)機(jī)制 將方法寫(xiě)入生命函數(shù)之中
            bus.$on('changeBortherName',function(value){  =>注意 此處依舊是bus  通過(guò)$on 監(jiān)聽(tīng) $emit方法
                  console.log(value)  =>大哥莫慌，我來(lái)了  （得到數(shù)據(jù)了 可以自行利用即可）
            })
        }
    }
    </script>

    <style>

    </style>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容