vue学习（一）页面传值篇

掌握2种基础的传值方式：

（1）由外向里传

（2）由里向外传

第一种：由外向里传

效果：

第二种：由里向外传

实现效果：

代码示例：

videolist.vue组件

/* eslint-disable handle-callback-err */
<template>
  <div class="video container mt-5">
  <div>状态:{{status}}</div>
  <div class="form-inline mb-3">
    <input type="txet" class="form-control mr-1" v-model="username">
    <button class="btn btn-primary" @click="updateUsername">更新房间号</button>
    <h6>（videolist组件的按钮）</h6>
  </div>
  </div>
</template>

<script>
export default {
  name: 'VideoList',
  data() {
    return {
      msg: 'Welcome to 视频页面vue',
      username: '80100'
    }
  },
  methods: {
    updateUsername() {
      const vm = this
      vm.$emit('pushNewName', vm.username)// 1.触发事件名称2.向外部传的变量值
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

App.vue页面

<template>
  <div id="app">
      <nav class="navbar navbar-toggleable-md navbar-light bg-faded" style="background-color: #e3f2fd;">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">状态</a>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-text">
           （外部App.vue组件页面接收传过来的参数）：{{ username }}
          </div>
      </div>
    </nav>
<router-view @pushNewName="getNewName"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      username: ''
    }
  },
  methods: {
    changeStatus() {
      this.myStatus = this.status
    },
    getNewName(newName) {
      console.log('getNewName接到的参数：' + newName)
      const vm = this
      vm.username = newName
    }
  }

}
</script>

<style lang='scss'>
@import "~bootstrap/scss/bootstrap";
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>