vue父组件传值和传引用

概述

vue组件在prop里根据type决定传值还是传引用：

传值：String、Number、Boolean

传引用：Array、Object

传值：

在父组件data中定义要传递的值title，代码如下：

<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 :sendTitle="title"></Header>
        <!-- 父组件向子组件Users传值，等号左边是自定义的变量名，右边是要传过去的data的值。
        传值有两种情况：1.传值；2.引用-->
        <hr>
        <Users :sendUsers="users"></Users>
        <Footer :sendTitle="title"></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{
            title: 'vue chaix'
        }
    },
    //2.注册组件
    components: {
        // HelloWorld
        Users: Users, //相当于Users 可使用双引号“Mr-chaix”，推荐官方写法Users
        Header,
        Footer
    }
}
</script>

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

<template>
    <header @click="changeTitle" class="header">
        <h1>{{title}}{{sendTitle}}</h1>
    </header>
</template>

<script>
export default {
    props:{
        sendTitle: {
            type: String
        }
    },
    data(){
        return {
            title:'Vue Component Demo!'
        }
    },
    methods: {
        changeTitle(){
            this.sendTitle = 'chaix修改了title'
        }
    }
}
</script>

<style scoped>
.header {
    background: lightgreen;
    padding: 10px;
}
h1 {
    color: #222;
    text-align: center;
}
</style>

传引用：

在父组件data中定义要传递的值users，代码如下：

<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 :sendTitle="title"></Header>
        <!-- 父组件向子组件Users传值，等号左边是自定义的变量名，右边是要传过去的data的值。
        传值有两种情况：1.传值；2.引用-->
        <Users :sendUsers="users"></Users>
        <hr>
        <Users :sendUsers="users"></Users>
        <Footer :sendTitle="title"></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}
            ],
            title: 'vue chaix'
        }
    },
    //2.注册组件
    components: {
        // HelloWorld
        Users: Users, //相当于Users 可使用双引号“Mr-chaix”，推荐官方写法Users
        Header,
        Footer
    }
}
</script>

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

<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>
        <button @click="deleteUser">deleteUser</button>
    </div>
</template>

<script>
export default {
    // props:["sendUsers","users2","users3"],
    props:{
        sendUsers: {
            type: Array,
            required: true
        }
    },
    data(){
        return {
            // users:['小猪佩奇','大象爱美丽','小羊苏溪'] 
        }
    },
    methods:{
        deleteUser(){
            this.sendUsers.pop();
        }
    }
}
</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>