vue---註冊元件、元件之間父子傳值

迷糊小丫丫發表於2020-11-05
Vue元件

一、元件：內部封裝html程式碼

步驟：
1.建立元件
2.元件註冊
3.元件使用

全域性註冊

全域性註冊A元件
元件被註冊在全域性範圍內，在任何一個Vue例項對應的模板中都可以使用該元件。my-com

<body>
    <div id="app">
        {{msg}}
        <br>
        --- 組建的使用---
        <br>
        <my-com></my-com>
    </div>
</body>
<script>
    //1.建立元件
    let myCom = {
        data() {
            return {
                comMsg: "元件資料"
            }
        },
        // 模板
        template: `
                <div>
                <span>{{comMsg}}</span>
                <span>{{comMsg}}</span>
                <button @click="comMsg='新資料123'">更改資料模型中的資料</button>
                </div>
            `
    };
    
    // 2.元件註冊
    // 全域性註冊
    Vue.component('my-com', myCom);

    //例項物件
    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        methods: {}
    });
</script>

區域性註冊

區域性註冊B元件
註冊在哪個元件內，哪個元件可以使用B元件
my-com內註冊了B元件，可以在my-com元件內使用B元件
my-com2內沒有註冊B元件，不可以在my-com2元件內使用B元件

<body>
    <div id="app">
        {{msg}}
        <br>
        //元件的使用
        <my-com-b></my-com-b>
    </div>
</body>
<script>
    let myComA = {
        template: `
               <div>
               A元件
               </div>
               `
    }
    let myComB = {
        // 區域性註冊A元件
        components: {
            "my-com-a": myComA
        },
        template: `
               <div>
                B元件
                <my-com-a></my-com-a>
               </div>
               `
    }

    //例項物件
    new Vue({
        el: '#app',
        //區域性註冊A元件
        components: {
            "my-com-a": myComA
        },
        data: {
            msg: 'hello'
        },
        methods: {}
    });
</script>

二、父子傳值

子元件如何使用父元件的資料 props
父元件如何使用子元件的資料 emit

單項資料流（資料更改方向）
父元件可以修改子元件的資料
子元件不可以修改父元件的資料

子元件使用父元件資料
1.父元件傳遞資料給子元件

2.子元件接受並處理資料
{
props:[‘title’,‘msg’,‘attrA’],
template:``
}

父元件使用子元件的資料
【事件】發射 自定義事件
在子元件內發射，在父元件接受

<body>
    <div id="app">
        <h3>子元件怎麼使用父元件的資料，父元件怎麼使用子元件的資料</h3>
        {{msg}}
        <!-- 父元件給子元件傳遞資料 -->
        <my-com @my-event="myEventHandle" :title="msg" static-attr="父元件給子元件的靜態資料"></my-com>
    </div>
</body>
<script>
    //1.建立元件
    let myCom = {
        // 接收父元件傳遞的資料
        props: ["title", "staticAttr"],
        data() {
            return {
                comMsg: "子元件資料"
            }
        },
        // 模板
        template: `
                <div>
                <span>子元件內部資料：{{comMsg}}</span>
                <br>
                <span>父元件內部資料：{{title}}--{{staticAttr}}</span>
                <br>
                <button @click="comMsg='新資料123'">更改資料模型中的資料</button>
                <br>
                <button @click="toEmit">發射資料</button>
                </div>
            `,
        methods: {
            toEmit() {
                // 發射  引數：自定義事件名稱，事件處理程式的實參（發射的資料）
                this.$emit('my-event', this.comMsg, 100)
            }
        }
    };
    // 2.元件註冊
    // 全域性註冊
    Vue.component('my-com', myCom);

    //例項物件
    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        methods: {
        //接收
            myEventHandle(a, b) {
                console.log(a, b, '---');

            }
        }
    });
</script>

相關文章