#vue# 【十三】 组件传值之父传子（超级通俗简单的思路！）

#vue# 组件传值之父传子

在开发中，为了更高效完成页面排版，
我们通常会使用父子组件来处理我们的排版，也相应地需要在父子组件里面进行赋值
下面就是父传子的步骤

在子组件页面：

（1）写入prop：[‘变量值’]，然后在要赋值的那个标签里面，进行赋值，
一般为{{}}和 v-bind:变量值（就是props里面的值）="item"
（prop 是子组件用来接受父组件传递过来的数据的一个自定义属性）

示例：
子组件文档为： nickname.vue
子组件里面：

<template>
    <div class="info-item">
        <div class="nickname">
            <div class="name">
                <span>姓名</span>
            </div>
        </div>
        <div class="revise" v-show="onshow">
            <p>{{ name }}</p>
            <button @click="inputshow()">修改</button>
        </div>
        <div class="submit" v-show="offshow">
            <input type="text" :value="name">
            <el-button @click="cancel()">取消</el-button>
            <el-button type="primary">保存</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: "nickname",
    props:['name'],
    data () {
        return {
            onshow: true,
            offshow: false
        }
    },
    methods:{
        inputshow() {
            this.onshow = false;
            this.offshow = true;

        },
        cancel() {
            this.onshow = true;
            this.offshow =false;
        }

    }

}
</script>

（2）父组件里面

在里面调用子组件（双标签形式），再进行绑定子组件变量：

 <nickname v-bind:name（就是待会传到子组件的值）="headName（父组件js里面的值，再赋给name）" ></nickname>

  <div class="user-list">
                <div class="list-message"><span>个人信息</span></div>
                <div class="user-content">
                    <nickname v-bind:name="headName" ></nickname>  //这个是子组件标签
                </div>

<script>
import Cover from "./item/cover";
import Nickname from "./item/nickname";
import Phone from "./item/phone";
import WeChat from "./item/WeChat";
import Password from "./item/password";
import Mailbox from "./item/mailbox";
const axios = require('axios');
export default {
    name: "user",
    components: {Mailbox, Password, WeChat, Phone, Nickname, Cover},
    data() {
        return {
            num:'',
            photo:'',
            headName:'我是来自父组件里面的数据', //在js里面设置一个变量，待会赋给子组件的值
            number:'',
            weiXin:''
    }
}
</script>

可能有胖友感觉不是很清晰，那就举一个很通俗易懂的例子吧哈哈哈，

（3）通俗理解

父传子的关系就相当于，老爸老妈给上大学的孩子每个月转生活费这个关系一样

3-1）首先假设父母是通过支付宝进行转，那么支付宝就相当于props（一个中间的桥梁），
转账的话，就一定要有孩子的支付宝账号
所以这个props里面的值（“name”）就相当于孩子的支付宝账号

3-2）其次，父母给到孩子的生活费，比如是2千，
那么这个这2千就相当于，父组件里面的变量“headName”
（也可能父母下个月给的生活费会是1千，或者不给，所以它是变量不是常量哈哈哈），

然后再把这个2千（变量“headName”），
通过搜索孩子的支付宝账号（子组件里面props:‘name’）进行转账，也就是绑定了以下事件

3-3）最后，当孩子拿到生活费以后，
可以把生活费拿去买网课、吃饭等等，进行分配生活费，
也就是把name，放到需要用到的标签里面