vue3 父子組件數據傳遞

父向子組件傳遞數據

1.通過props數組傳遞數據

   <div id="vm">
    <blog-t title="標題" subtitle='副標題'></blog-t>
    </div>
    <script>
        const app = Vue.createApp({});
        app.component('blog-t',{
            props:['title','subtitle'],
            template: `<h4>{{ title }}</h4><br>{{subtitle}}`
        });
        const vm = app.mount('#vm');
    </script>

 2.父向子傳遞數據

    <div id="vm">
        <button-a :title='title'></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    title:'abcd'
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

main.js 

const btn1 = {
            props:['title'],
            template: `<button>{{title}}</button>` 
        }
export {btn1}

3.爲Prop指定類型

    <div id="vm">
        <blog-t title="標題" subtitle='副標題'></blog-t>
    </div>
    <script>
        const app = Vue.createApp({});
        app.component('blog-t', {
            props: {
                'title': String,
                //會警告錯誤
                'subtitle': Number
            },
            template: `<h4>{{ title }}</h4><br>{{subtitle}}`
        });
        const vm = app.mount('#vm');
    </script>

 

 4.向子組件傳遞其他類型

（1） int 類型

傳靜態數字類型：使用v-bind

    <div id="vm">
        <button-a :title='10'></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            // data() {
            //     return {
            //         title:'abcd'
            //     }
            // }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

////////////////// main.js /////////////

const btn1 = {
    props:['title'],
    template: `<button>{{ typeof title}}</button>` 
}
export {btn1}

傳動態數據類型：

    <div id="vm">
        <button-a :title='title'></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    title:10
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>


/////////////////main.js  ///////
同上

（2）bool

傳靜態數據類型： 

？？？？？

（3）數組

靜態

   <div id="vm">
        <button-a :title="[234, 266, 273]"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

/////////////////////main.js////////////
const btn1 = {
    props:['title'],
    template: `<button>{{ title.constructor == Array}}</button>` 
}
export {btn1}

動態

    <div id="vm">
        <!--一直默認爲ture-->
        <!-- <button-a title></button-a> -->
        <button-a :title="title"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    title:[234, 266, 273]
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

（4）對象

靜態

    <div id="vm">
        <button-a :title="{a:10}"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>
////////////////////main.js////////////////////

const btn1 = {

    props:['title'],

    template: `<button>{{ title.constructor == Object}}</button>` 

}

export {btn1}

動態

    <div id="vm">
        <button-a :title="title"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    title:{a:10}
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

 

子向父組件傳遞數據

1.