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.