夜光带你走进Vue.js（三）擅长的领域

夜光序言：

 

 

一个人真正的孤独，是独自走在华灯初上的街，渐渐走进夜幕，看着眼前霓虹灯闪烁，内心突然一阵荒凉。

 

自己像一个幽魂在游荡，看着街道上熙熙攘攘的人群，那些欢笑着的面孔，那些并肩携手的情侣，相互搀扶的老夫妻……所有的温情对于我来讲都只是美好的画面，我只是这人间的看客，一切都是不属于我，只有一些定格在脑海里的美好，在回忆的那一刻，在得失间，无奈地笑了，笑出了冰冷的泪花。

 

 

 

 

 

正文：Vue.js 框架，擅长的领域

实现一个基本的功能

 

 

差不多就是要实现上面这种功能

=====================================================

第一步：先写一个这个

import Vue from 'vue';

var VueEvent = new Vue();

export default VueEvent;

 

第二步：写一个这个，主App.js

<template>
  <div id="app">
<!--    {{msg}}

    <h2>这是一个首页组件&#45;&#45;&#45;&#45;{{msg}}</h2>-->
    <v-home></v-home>  <!--使用组件，在模板中-->
    <br>
    <br>
    <hr>
    <v-news></v-news>
  </div>
</template>

<script>
import Home from './components/Home.vue';  //1. 首先引入这个组件
import News from './components/News.vue';
export default {
  name: 'app',
  data () {
    return {
      msg: 'hy',  //文本框里面输入的内容样式
    }
  },
  components:{     //2. 挂载组件
    'v-home':Home,    //这样就可以了嗯
    'v-news':News    //这样就可以了嗯
  }
}
</script>

<style>


</style>

 

第三步：写一个

 

<template>
  <!--这个里面写的是html-->
  <div id="home">  <!--所有的东西需要被一个根节点包含起来，否则会有错误-->
        我是首页组件
         <br>
         <button @click="emitNews()">给news组件广播数据</button>
         <br>
  </div>
</template>

<script>
  import Header from './Header.vue';
  import Life from './Lify.vue';

  import Axios from 'axios';
  // 引入vue实例 , 发送广播

  import VueEvent from '../model/VueEvent.js';
  export default {
     data(){
         return{
           msg: '夜光：我是一个home组件',
           title: '首页1111',
         }
     },methods:{
         emitNews(){
           //广播数据
           VueEvent.$emit('to-news',this.msg)
         }
     },
     mounted() {
       //监听广播的数据
       VueEvent.$on('to-home',function (data) {
          console.log(data)
       })
     }
  }
</script>

<style lang="css" scoped>
/* 这个里面主要写一些样式*/
/*scoped表示作用域*/


</style>

第四步：再写一个

<template>
  <div id="news">

       我是新闻组件
    <br>
    <button @click="emitHome()">给home组件广播数据</button>
    <br>
  </div>
</template>

<script>

  // 引入vue实例 , 接受广播
   import VueEvent from '../model/VueEvent.js';
   export  default {
     data(){
       return {
         msg: '夜光：我是一个新闻组件'
       }
     },
     methods:{
       emitHome(){
         //hy：广播
         VueEvent.$emit('to-home',this.msg)
       }
     },

     mounted() {
         VueEvent.$on('to-news',function (data) {
           console.log(data);
         })
     }

   }

</script>

<style>


</style>