【VueCli脚手架】——第四章从父组件向子组件传值和传引用

一、在父组件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.vue
  props: {
    title: {
      type: String//填写类型
    }
  },

//Users.vue
  props: {
    sbqusers: {
      type: Array, //填写类型
      required: true
    }
  },

//Footer.vue
  props: {
    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>