Vue父组件传值给子组件

概述

父组件传值给子组件比较简单，在子组件中使用 props就可以实现

直接上代码：

父组件APP.vue代码：

<template>
    <div id="app">
        <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
        <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
        <!-- <h1>App.vue</h1> -->
        <!-- 3.调用组件 -->
        <Header></Header>
        <!-- 父组件向子组件Users传值，等号左边是自定义的变量名，右边是要传过去的data的值 -->
        <Users :sendUsers="users"></Users>
        <Footer></Footer>
    </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
//1.局部调用组件
import Users from './components/Users';
import Header from './components/Header';
import Footer from './components/Footer';

export default {
    name: 'app',
    data(){
        return{
            users : [
                {name:'chaix1', wechat:'790877475', show: false},
                {name:'chaix2', wechat:'790877475', show: false},
                {name:'chaix3', wechat:'790877475', show: false},
                {name:'chaix4', wechat:'790877475', show: false},
                {name:'chaix5', wechat:'790877475', show: false},
                {name:'chaix6', wechat:'790877475', show: false}
            ]
        }
    },
    //2.注册组件
    components: {
        // HelloWorld
        Users: Users, //相当于Users 可使用双引号“Mr-chaix”，推荐官方写法Users
        Header,
        Footer
    }
}
</script>

<style scoped>
h1 {
    color: purple
}
</style>

子组件Users.vue代码：

<template>
    <div class="users">
        <!-- <h1>Users.vue</h1> -->
        <p>{{sendUsers}}</p>
        <ul>
            <li  @click="user.show = !user.show" v-for="(user,index) in sendUsers" :key="index">
                <!-- 脚手架每次编译调用eslint检测出现bug，循环需要指定key值，且唯一 -->
                <h2>{{user.name}}</h2>
                <h3 v-show="user.show">{{user.wechat}}</h3>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    // props:["sendUsers","users2","users3"],
    props:{
        sendUsers: {
            type: Array,
            required: true
        }
    },
    data(){
        return {
            // users:['小猪佩奇','大象爱美丽','小羊苏溪'] 
        }
    },
    methods:{
        test(){
            window.console.log(this.sendUsers);
        }
    }
}
</script>

<style scoped>
h1 {
    color: green
}
.users {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}
ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
}
li {
    flex-grow: 1;
    flex-basis: 200px;
    text-align: center;
    padding: 30px;
    border: 1px solid #222;
    margin: 10px;
}
</style>

关键点就是需要在子组件中 使用 props 关键字 来接收父组件传过来的值