第十九节:带你梳理Vue2: 父组件向子组件传参(props传参)

1. 组件嵌套

1.1 组件的嵌套使用

之前有说过,Vue组件跟Vue实例是一样的,因此在Vue中一个组件中也可以定义并使用自己的局部组件,这就是组件的嵌套使用

例如:示例代码如下:

<div id="app">
     <!-- 3. 使用组件 -->
    <my-component></my-component>
</div>

<script>
    // 子组件选项
    let sonComponent = {
     
        template:`
            <span>我是子组件</span>
        `,
    }

    //  父组件选项对象
    let MyComponent = {
     
        template: `
            <div>
                <h2>我是父组件</h2>
                <my-son></my-son>
                <my-son />
            </div>
        `,
        // 将子组件定义为父组件的局部组件
        components: {
     
            mySon: sonComponent
        }
    }
   
    // 2. 注册局部组件
    const vm = new Vue({
     
        el:"#app",
        
        components: {
     
            "MyComponent": MyComponent
        }
    })
</script>

显示结果:

通过示例我们就了解到,组件可以嵌套使用,那么我们就不得不思考一个问题,他们各自之间的数据关系如何?能否相互使用对方的数据呢?

1.2 组件间的数据关系

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。

示例代码如下

<div id="app">
     <!-- 3. 使用组件 -->
    <my-component></my-component>
</div>

<script>
    // 子组件选项
    let sonComponent = {
     
        template:`
            <span>我是子组件{
      {msg}}</span>
        `,
    }
  

    //  父组件选项对象
    let MyComponent = {
     
        template: `
            <div>
                <h2>我是父组件</h2>
                <h3>父组件中使用子组件</h3>
                <my-son></my-son>
                <my-son />

                <h3>父组件中使用父组件数据</h3>
                {
      { msg }}
            </div>
        `,
        data(){
     
            return {
     
                msg: "哈哈,我是父组件数据"
            }
        },
        // 将子组件定义为父组件的局部组件
        components: {
     
            mySon: sonComponent
        }
    }
   
    // 2. 注册局部组件
    const vm = new Vue({
     
        el:"#app",
        
        components: {
     
            "MyComponent": MyComponent
        }

    })
  
  
</script>

显示结果:

如果在子组件中强行使用父组件的数据 ,就会报错,
那么子组件如何才能获取父组件的数据呢?

2. props 属性

父组件可以使用 props 把数据传给子组件。

2.1 props基本使用

父组件在使用子组件时, 可以将父组件的数据绑定到子组件的自定义标签上,

子组件在选项中添加一个props属性来接收数据

示例代码如下:

<div id="app">
    <!-- 使用组件 -->
    <my-component></my-component>
</div>

<!-- 子组件模板 -->
<template id="son">
    <div>
        <table border="1">
            <tr colspan="3">子组件数据</tr>
            <tr>
                <td>my name</td>
                <td>{
  { myName }}</td>
            </tr>
            <tr>
                <td>my age</td>
                <td>{
  { myAge }}</td>
            </tr>
        </table>
    </div>
</template>

<!-- 父组件模板 -->
<template id="MyComponent">
    <div>
        <h2>显示父组件传给子组件的数据</h2>
        <!-- 通过两个组件的契合点，父组件通过自定义属性将数据传递给子组件 -->
        <!-- 在属性传输数据的时候使用连字符语法 -->
        <my-son :my-name="name" :my-age="age"></my-son>
    </div>
</template>

<script>
    // 子组件选项
    let sonComponent = {
     
        // 子组件通过props接受数据并使用
        // 数组里放父组件中自定义属性的名字
        // props 里面使用驼峰写法
        props:["myName","myAge"],
        template:`#son`,
    }


    //  父组件选项对象
    let MyComponent = {
     
        template: `#MyComponent`,
        data(){
     
            return {
     
                name:"wuwei",
                age:18
            }
        },
        // 将子组件定义为父组件的局部组件
        components: {
     
            mySon: sonComponent
        }
    }

    //  实例中注册组件
    const vm = new Vue({
     
        el:"#app",

        components: {
     
            "MyComponent": MyComponent
        }

    })

</script>

显示结果:

2.2 数据传递分类

都知道在JS中数据分为两大类,基本数据类型和引用数据类型

因此在父组件向子组件传递数据时也分为两种:为传值和传引用

传值：String Number Boolean

传引用： Array Object

那么接下来我们好好研究研究两者的不同

2.2.1 传递的是基本类型

基本类型,顾名思义,就是传递JS基本数据类型的数据

示例代码如下:

<div id="app">
  <conter :count="3"></conter>
  <conter :count="4"></conter>
</div>

<script>
  var conter = {
     
    props: