一、在父组件App.vue中定义属性和数组

  data() {return {users: [{ name: "Jack", age: 18, show: false },{ name: "Tom", age: 19, show: false },{ name: "David", age: 19, show: false },{ name: "Lucy", age: 18, show: false }],title: "Vue Picc"};}

二、在父组件的标签中向子组件传值

<template><div id="app"><header1 :title="title"></header1><users :sbqusers="users"></users><footer1 :title="title"></footer1></div>
</template>

三、在子组件中接收值

     分别在子组件的<script>标签中定义props来接收父组件传递过来的值

//Header.vueprops: {title: {type: String//填写类型}},//Users.vueprops: {sbqusers: {type: Array, //填写类型required: true}},//Footer.vueprops: {title: {type: String}},

四、浏览器访问、验证

 五、关键文件代码

 App.vue

<template><div id="app"><header1 :title="title"></header1><users :sbqusers="users"></users><footer1 :title="title"></footer1></div>
</template><script>
//局部调用组件
import HelloWorld from "./components/HelloWorld.vue";
import Users from "./components/Users.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {name: "App",components: {//注册组件users: Users,header1: Header, //因为有header标签的存在，所以不能起header名字footer1: Footer},data() {return {users: [{ name: "Jack", age: 18, show: false },{ name: "Tom", age: 19, show: false },{ name: "David", age: 19, show: false },{ name: "Lucy", age: 18, show: false }],title: "Vue Picc"};}
};
</script><style scoped>
h1 {color: purple;
}
</style>

Header.vue

<template><div class="header"><h1>{{title}}</h1></div>
</template>
<script>
export default {props: {title: {type: String}},data() {return {//title: "Vue Components Demo"};},methods: {}
};
</script>
<style scoped>
.header {background: lightgreen;padding: 10px;
}
h1 {color: #222;text-align: center;
}
</style>

Users.vue

<template><div class="users1"><ul><li @click="user.show=!user.show" v-for="(user,index) in sbqusers" :key="index"><h2>{{user.name}}</h2><h3 v-show="user.show">{{user.age}}</h3></li></ul><!-- 传引用--><button @click="deleteUser">delete</button></div>
</template>
<script>
export default {//props: ["sbqusers"],props: {//接收从父组件传过来的属性sbqusers: {type: Array, //填写类型required: true}},data() {return {};},methods: {deleteUser() {this.sbqusers.pop(); //从后往前删}}
};
</script>
<style scoped>
h1 {color: green;
}
</style>

Footer.vue

<template><div class="footer"><footer><p>{{copyright}} {{title}}</p></footer></div>
</template>
<script>
export default {props: {title: {type: String}},data() {return {copyright: "Copyright 2020 Vue Demo"};}
};
</script>
<style scoped>
footer {background: #222;padding: 6px;
}
p {color: lightgreen;text-align: center;
}
</style>