Vue父子传值

昨天创建完项目以后，今日首先使用项目来做一个简单的导航栏体会一下Vue的使用

1.项目的结构：

2.首先在Vheader.Vue中编辑代码：

<template>
  <header class="header">
    <div class="nav">
      <div class="logo">
        <img :src="imgSrc" alt="">
      </div>
      <div class="info">
        <button>登录</button>
        <button>注册</button>
      </div>
    </div>
  </header>
</template>

<script>
  import imgSrc from "../assets/logo.png"
  export default {
    name: 'Vheader',
    data() {
      return {
        imgSrc:imgSrc,
      }
    }
  }
</script>

<style scoped>
  .header {
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 #c9c9c9;
  }
  .header .nav{
    width: 980px;
    height: 40px;
    margin: 0 auto;
    /*float: left;*/
    background-color: transparent;
  }
  .nav .logo{
    width: 100px;
    height: 40px;
    float: left;
  }
  .logo img{
    width: 40px;
    height: 40px;
  }
  .nav .info{
    float: right;
    width: 200px;
    height: 40px;
  }
  .info button{
    width: 80px;
    height: 40px;
    float: left;
  }
</style>

View Code

3.App.vue主文件进行调用组件：

<!-- 一个组件由三部分组成 -->
<template>
  <!-- 页面的结构 -->
  <div class="app">
    <Vheader class="header">

    </Vheader>
    <Vcontent></Vcontent>
    <Vfooter></Vfooter>


    <h3>{{currentMsg}}</h3>
    <img :src="imgSrc" alt="">

    <ul>
      <li v-for="item in getArray">
        <a href="javascript">{{item}}</a>
      </li>
    </ul>
    <button @click="clickHandler">修改</button>


  </div>
</template>

<script>
  //1.先引入组件
  //file-loader
  import imgSrc from './assets/logo.png'
  import Vheader from './components/Vheader.vue'
  import Vfooter from './components/Vcontent.vue'
  import Vcontent from './components/Vfooter.vue'
  //页面的业务逻辑
  export default {
    name: 'app',
    data() {       //data必须是一个函数
      return {    //必须return。
        msg: "hello S9!",
        starts: [
          "邓超", "郑凯", "陈赫"
        ],
        imgSrc: imgSrc, //将图片当成一个模块，引入成为对象。
      }
    },
    methods: {
      clickHandler() {
        //这里跟msg紧密相关，一旦刷新页面会打印1,点击按钮msg发生
        //了变化，那么这个1又打印1遍
        console.log(1);
        this.msg = "哈哈哈"
        this.starts.push("baby")
      }

    },
    computed: {
      currentMsg() {
        return this.msg
      },
      getArray() {
        return this.starts
      }

    },
    //2.挂载
    components: {
      Vheader: Vheader,
      Vcontent: Vcontent,
      Vfooter: Vfooter,
    }
  }
</script>


<style scoped>
  *{
    padding: 0;
    margin: 0;
  }
</style>

View Code

最后就是整个流程的图。