关于父子组件之间数据的传递

一 ：父组件向子组件传递数据 (传递方式 ：props)

1.1 传递的是静态值（固定的数值）

<template>
    <div>
        <h2>我是父亲</h2>
        <hr>
        <Son message="自父亲的数据"></Son>
    </div>
</template>

<script>
import Son from './son.vue'
export default {
    components: {
        Son
    }
}
</script>

<style>
</style>

<template>
    <div>
        <h2>我是儿子</h2>
        <h2>我收到了：{{ message }}</h2>

    </div>
</template>

<script>
export default {
    props: ['message']
}
</script>

<style>
</style>
特点：如果是静态的数据  直接在父组件引用的子组件的地方传入数据 ，但是在子组件中在于data同级别的props里进行接收  在子组件就可以直接引用

1.2 传递的是父组件里data的数据（也可以称之为动态数据）

template>
    <div>
        <h2>我是父亲</h2>
        <hr>
        <!-- 左侧是子组件接受的容器  右侧是父组件要传入的动态数据 -->
        <Son :aa="message"></Son>
    </div>
</template>

<script>
import Son from './son.vue'
export default {
    components: {
        Son
    },

    data() {
        return {
            message: '123'
        }
    }
}
</script>

<style>
</style>

`` `

总结 ：1 父传子时候子组件不允许改变父组件传过来的数据 2 props的接收方式可以是对象的形式 如下 3 props 可以对数据进行检测 详细可以观看官网

props：{
message ：Number
defult :100
}

## 二 ： 子组件向父组件传递数据（发射自定义事件）

<template>
    <div>
        <h2>我是父亲</h2>
        <h2>我收到了儿子的 :{{ message }}</h2>
        <hr>
        <!-- 在父组件中的对应的子组件中接受这个事件 并且可以进一步处理 -->
        <Son @tofather="getdata"></Son>
    </div>
</template>

<script>
import Son from './son.vue'
export default {
    components: {
        Son
    },

    data() {
        return {
            message: ''
        }
    },
    methods: {
        getdata(val) {
            // console.log(val);
            this.message = val
        }
    }
}
</script>

<style>
</style>
```js