vue-父组件和路由

标签：javascrip   log   路由   tmp   type   基本   login   click   NPU   

父子组件之间传值

 <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
    });

vue-父组件和路由

标签：javascrip   log   路由   tmp   type   基本   login   click   NPU   

原文地址：https://www.cnblogs.com/ygjzs/p/11830086.html