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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏滕先生的博客

react-native 跨平台滤镜集成

44980
来自专栏谦谦君子修罗刀

storyboard中改变TabBar的字体颜色

一、用storyboard建立的Tab bar,不能改变它的字体颜色。 如果用storyboard建立TabBarController,那么想要选择Bar T...

38890
来自专栏vue学习

20、分类详情页之数据渲染

然后复制一系列就是我们左侧栏的各个标题了,记住这里的每个标题的id要和首页各个分类名的id相对应。

24520
来自专栏从零开始学自动化测试

Appium+python自动化28-name定位

前言 appium1.5以下老的版本是可以通过name定位的,新版本从1.5以后都不支持name定位了 一、 name定位报错 1.最新版appium V...

37150
来自专栏更流畅、简洁的软件开发方式

页面回发后,让页面自动滚动到指定位置的一种简单的方法

最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。 就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以...

39570
来自专栏IMWeb前端团队

jQuery日历价格、库存设置Web组件2,前后台适用,可自定义字段及颜色风格

本文作者:IMWeb capricorncd 原文出处:IMWeb社区 未经同意,禁止转载 calendar-price-jquery 基于Jquer...

31450
来自专栏PPV课数据科学社区

【工具】一个投行工作十年MM的Excel操作大全

>移动到当前数据区域的边缘:CTRL+ 箭头键 移动到行首:HOME 移动到工作表的开头:CTRL+HOME 移动到工作表的最后一个单元格。:CTRL+END ...

30140
来自专栏听雨堂

JQuery笔记(二) animate支持的属性

以常见的图片切换效果对animate的动画做了实验,用了两种方式,一种是修改相对位置,一个是修改背景的位置,结果第一种可以,第二种失败。 <!DOCTYPE h...

224100
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

37750
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

398110

扫码关注云+社区

领取腾讯云代金券