介绍

父组件向子组件传递数据

传递方式有2种：

• 动态传递，可传递各种数据类型（推荐）
• 静态传递，认为传入的是字符串

定义子组件

定义子组件时，需要指定 props ，作用是给组件定义属性

var blogTitle={
    props: ['title'],//由于html不区分大小写，推荐短横线分隔命名，不推荐驼峰命名
    template: '<h3>{{ title }}</h3>'
}
Vue.component('blog-title',blogTitle)

解释：

• props: ['title']：可以指定多个属性

命名： 推荐短横线分隔命名，不推荐驼峰命名，因为在html中 不区分大小写

使用子组件（传递 静态 Prop）

使用子组件时，通过给自组件的属性赋值，向子组件传递数据

注意：像下面这种 title="vue 入门"，把值写在title属性中的，叫 传递 静态 Prop

<blog-title title="vue 入门"></blog-title>

完整代码

<div id="app" >
    <blog-title title="vue 入门" content="vue是一个优秀的js框架"></blog-title>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>

    var blogTitle={
        props: ['title','content'],

        template: ` //tab按键上面的符号
        <div>
            <h3>{{ title }}</h3>
            <div>{{ content }}</div>
        </div>`
    }
    Vue.component('blog-title',blogTitle)

    new Vue({
        el: '#app'
    })
</script>

v-bind 动态传递 prop

使用 子组件时，通过 v-bind:属性名="变量名" 动态传递数据，如下：

<blog-title :title="title" v-bind:content="content"></blog-title>

解释:title="title" ：

• :title：: 是 v-bind，title 是子组件定义的 Prop
• "title"：是父组件定义的 变量

例子-传递 动态 Prop

完整代码

<div id="app" >
    <blog-title :title="title" v-bind:content="content"></blog-title>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>

    var blogTitle={
        props: ['title','content'],

        template: `
        <div>
            <h3>{{ title }}</h3>
            <div>{{ content }}</div>
        </div>`
    }
    Vue.component('blog-title',blogTitle)

    new Vue({
        el: '#app',
        data:{
            title:'vue 入门',
            content:'vue是一个优秀的js框架'
        }
    })
</script>

传递数据类型

静态传递（有缺点）

都是按字符串处理

<div id="app" >
    <blog-title title="vue 入门" view_num="1024" is_hot="true" tags="['vue','基础','javascript']"></blog-title>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>

    var blogTitle={
        props: ['title','view_num','is_hot','tags'],

        template: `
        <div>
            <h3>{{ title }}</h3>
            <div>浏览量：{{view_num}}（类型：{{typeof view_num}}），热贴：{{is_hot}} （类型：{{typeof is_hot}}）</div>
            标签：<span v-for="(item,index) in tags" :key="index">{{ item }} </span>类型：{{typeof tags}}
        </div>`
    }
    Vue.component('blog-title',blogTitle)

    var app=new Vue({
        el: '#app',
        data:{
        }
    })
</script>

显示的类型都是 string

动态传递

按传入数据的类型处理

类型有：

• string
• number
• boolean
• array
• object

下面例子演示前4种：

<div id="app" >
    <blog-title :title="title" :view_num="view_num" :is_hot="is_hot" :tags="tags"></blog-title>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>

    var blogTitle={
        props: ['title','view_num','is_hot','tags'],

        template: `
        <div>
            <h3>{{ title }}</h3>
            <div>浏览量：{{view_num}}（类型：{{typeof view_num}}），热贴：{{is_hot}} （类型：{{typeof is_hot}}）</div>
            <span v-for="(item,index) in tags" :key="index">{{ item }} </span>类型：{{typeof tags}}
        </div>`
    }
    Vue.component('blog-title',blogTitle)

    var app=new Vue({
        el: '#app',
        data:{
            title:'vue 入门',
            view_num:1024,
            is_hot:true,
            tags:['vue','基础','javascript']
        }
    })
</script>

传入什么类型，显示什么类型

原文出处：/show_1IXQEFTFe3z.html