当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue-父组件和路由

vue-父组件和路由

2019年11月10日  | 移动技术网IT编程  | 我要评论

父子组件之间传值

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网