Vue3.x系列--向子组件传递数据prop

prop向子组件传递数据

在组件代码中注册一些自定义属性，称为prop，在组件的props选项中定义，使用组件时，就可以把这些prop的名字作为原始属性名使用，通过属性向组件传递数据

1、prop基本用法

<div id="app">
       <blog-content title="小明"></blog-content>
       <blog-content title="小红"></blog-content>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
       const vm = Vue.createApp({
       });
       vm.component('blog-content',{
        props:['title'],
        template:'<h3>{{ title }}</h3>'
       })
       vm.mount('#app');
    </script>

2、组件之间传递数据

<div id="app">
       <blog-content></blog-content>
       <blog-content></blog-content>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
       const vm = Vue.createApp({});
       // 组件1
       vm.component('blog-content',{
        // 这里使用组件2名称 blog-title 绑定组件名称 将组件1的数据传递给组件2
        template:'<h3><blog-title v-bind:date-title="msg"></blog-title></h3>',
        data:function(){
            return{
                msg:"组件1把数据传递给组件2"
            }
        }
       })
       // 组件2
       vm.component('blog-title',{
            props:['dateTitle'],
            template:'<h3>{{ dateTitle }}</h3>'
       })
       vm.mount('#app');
    </script>

3、传递多个值

<div id="app">
        <blog-content></blog-content>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const vm = Vue.createApp({
        });
        // 组件1
        vm.component('blog-content',{
            template:'<div><blog-title :name="name" :price="price" :num="num"></blog-title></div>',
            data:function(){
                return{
                    name:'苹果',
                    price:'6.88元',
                    num:'2800公斤'
                }
            }
        })
        // 组件2
        vm.component('blog-title',{
            props:['name','price','num'],
            template:'<h3>{{name}} {{price}}{{num}}</h3>'
        })
        vm.mount('#app')
    </script>

参考：

https://www.cnblogs.com/Huang-zihan/p/16340814.html#top