Vue.js学习笔记(4)

全局组件引入,使用更方便
在main.js中使用 ‘vue.component(‘组件名’, ‘组件对象’);’

Vue.config.productionTip = false

import createApplication from './components/createApplication.vue'
import createUser from './components/createUser.vue'
import toolBar from './components/toolBar.vue'
import viewMain from './components/viewMain.vue'

Vue.component('createApplication', createApplication);
Vue.component('toolBar', toolBar);
Vue.component('viewMain', viewMain);
Vue.component('createUser', createUser);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

父组件传输数据到子组件

   //父组件中发送数据
<template>
  <div>
    <viewMain :type="type"  v-bind:textTwo="type" textOne="父组件传值"></viewMain>
  </div>
</template>

// 子组件中接收数据

<script>
  import info from '../components/info'
  export default {
    props:['textOne', 'textTwo', 'type']
  }
</script>

全局组件之间数据传输

创建全局js文件
使用emite等

页面之间数据传输push

testParams() {
        this.$router.push({
          // 传递参数
          name:'newsDetail', query:{id:1, name:'query2'}, params:{id:2,name:'params2'}
        });
   }

接收

 created() {
        // 数据初始化 获取路由参数 
        // $route (数据) $router (功能函数)
        alert(this.$route.params.name)
        alert(this.$route.query.name)
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • © fengyu学习 不出所料,上班果然放松了我学习的心底防线 这篇文章是工作日写好了大半的,今天整理出来,和大家...
    封小胖阅读 1,780评论 5 14
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,655评论 0 32
  • 序言:乱七八糟一锅粥! 基于Vue.js 教程、介绍— Vue.js 心得: 在vue中,推荐始终使用 kebab...
    苦苦修行阅读 659评论 0 1
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,281评论 1 22
  • 苏瑾芮叹了口气,她不是拿欧阳璐没有办法,只是要来硬的的话,对以后的合作终究会有不好的影响。正在她不知道该怎么办的时...
    赵小作z阅读 545评论 5 16