Vue入門基礎（父級組件屬性傳參）

App.vue

<template>
  <div id="app">
     <Header/>
    <!--使用組件   並傳遞當前組件值  -->
    <Users :users="users" :username="uname"/>
    <Footer/>
  </div>
</template>

<script>
//註冊局部組件
//1 引入組件
import Users from './components/Users.vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
  name: 'app',
  components: { //2 註冊組件
    Users,
    Header,
    Footer
  },
  data(){
    return{
      users:[
       {name:"我是1",wechat:"1111",isshow:false},
       {name:"我是2",wechat:"1111",isshow:false},
       {name:"我是3",wechat:"1111",isshow:false},
       {name:"我是4",wechat:"1111",isshow:false},
       {name:"我是5",wechat:"1111",isshow:false},
       {name:"我是6",wechat:"1111",isshow:false}
     ],
     uname:"ERDONG",
    };
  }
}
</script>

<style>
 h1{
  color:red;
} 

</style>

Users.vue

<template >
  <div class="users">
    <P>{{username}}</P>
    <P>{{myusers}}</P>
    <ul>
        <!-- vue 遍歷需要key屬性綁定-->
        <li @click="val.isshow=!val.isshow" v-for="(val,index) in myusers" :key="index">
            <h2>{{val.name}} </h2>
            <h3 v-show="val.isshow">{{val.wechat}} </h3>
        </li>
    </ul>
  </div>
</template>

<script>

//js 邏輯部分
export default {
  //引用父級傳值  第一種方式
  //props:["users","username"],

  //引用父級傳值  第二種方式
  props:{
    users:{
      type:Array,//指定傳參類型
      required:true //強制要求必須有該傳參
    },
    username:{

    }
  },
  name: 'users',
  data() {
    return {
      myusers:this.users   //父級的參數可以直接引用或者再賦值
     };
  }
}
</script>

<style scoped>
.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>

 

頁面效果