vue-父組件和路由

父子組件之間傳值

 <div id="app">

    <com1 v-bind:parentmsg="msg" @func="getMsgFormSon"></com1>

  </div>


  <template id="tmpl">
    <div>
      <h1>這是子元素 --- {{ parentmsg }}</h1>
      <input type="button" value="向父組件傳遞消息" @click="sendMsg">
    </div>
  </template>

 var com1 = {
      template: '#tmpl',
      data() {
        return {
          msg: '做一個孝順的孩子，給爸爸一些錢去揮霍吧！'
        }
      },
      props: ['parentmsg'],
      methods: {
        sendMsg() {
          this.$emit('func', this.msg)
        }
      }
    }

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '這是父組件中的數據，爸爸有100塊錢，my son, 你要不',
        msgFormSon: ''
      },
      methods: {
        getMsgFormSon(data) {
          this.msgFormSon = data
          console.log(this.msgFormSon)
        }
      },
      components: {
        com1
      }
    });

路由的基本使用

 <div id="app">
    <router-link to="/login">登錄</router-link>
    <router-link to="/register">註冊</router-link>

    <!-- 容器 -->
    <router-view></router-view>

  </div>

 // 2. 創建子組件
    var login = {
      template: '<h3>這是登錄子組件，這個組件是 奔波霸 開發的。</h3>'
    }

    var register = {
      template: '<h3>這是註冊子組件，這個組件是 霸波奔 開發的。</h3>'
    }

    // 3. 創建一個路由對象
    var router = new VueRouter({
      routes: [ // 路由規則數組
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive' // 和激活相關的類
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });