小组件在components文件夹中,页面组件在views文件夹中

一、先写小组件的vue,比如text.vue(在template设置模板渲染,style设置样式)

<template>
<div class="text">
<p>tttt</p>
</div>
</template> <script>
export default {
name: "text"
}
</script> <style scoped>
.text {
color: red;
}
</style>

二、页面组件(Home.vue)中使用小组件需要这几步:

1.先导入小组件(import T from '@/components/text')

2.然后在export default中注册小组件

  components:{

    T

  }

3.在template中写: <T></T>    把text.vue的模板传递过来

<template>
<div class="home">
<T></T>
</div>
</template> <script>
import T from '@/components/text' export default {
name: 'home',
components: {
T
}
}
</script>

Vue框架——页面组件中使用小组件的更多相关文章

  1. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  2. vue 父组件中调用子组件函数

    2019/06/06 在父组件中调用子组件的方法:  1.给子组件定义一个ref属性.eg:ref="childItem"  2.在子组件的methods中声明一个函数.eg: u ...

  3. Element Tabs 组件中使用 ve-histogram组件渲染不出来(已解决)

    Element Tabs 组件中使用 ve-histogram组件渲染不出来 发现问题提了issue,饿了么前端“西瓜”同学很快做了回复,饿了么大前端团队有沉淀很专业,赞. tip: GitHub 的 ...

  4. React Hooks中父组件中调用子组件方法

    React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle,useRef /* child子组件 */ // https://reactjs.org ...

  5. vue父组件中调用子组件的方法

    Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...

  6. vue父组件中获取子组件中的数据

    <FormItem label="上传头像" prop="image"> <uploadImg :width="150" ...

  7. Vue刷新页面VueX中数据清空了,怎么重新获取?

    Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...

  8. react:在一个组件中调用别的组件中的方法

    先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟 ...

  9. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

随机推荐

  1. Python -- 正则表达式 regular expression

    正则表达式(regular expression) 根据其英文翻译,re模块 作用:用来匹配字符串.  在Python中,正则表达式是特殊的字符序列,检查一个字符串是否与某种模式匹配. 设计思想:用一 ...

  2. 什么是JSON Web Token

    JSON Web Token(JWT)是一个基于 RFC 7519 的开放数据标准,它定义了一种宽松且紧凑的数据组合方式,使用 JSON  对象在各应用之间传输加密信息.该 JSON 对象可以通过数字 ...

  3. call JSON.parse JSON.stringify typeof 的使用及严格模式this的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. ACM之Java输入输出

    本文转自:ACM之Java输入输出 一.Java之ACM注意点 1. 类名称必须采用public class Main方式命名 2. 在有些OJ系统上,即便是输出的末尾多了一个“ ”,程序可能会输出错 ...

  5. 【数论】[涨姿势:同余]P2312解方程

    题目描述 已知多项式方程:\(a_0 + a_1x + a_2x^2+...+a_nx^n = 0\) 求这个方程在[1,m]内的整数解 \(1\leq n\leq100,|a_i|\leq 10^{ ...

  6. JSX 简介

    JSX 简介 考虑如下变量声明: const element = <h1>Hello, world!</h1>; 这个有趣的标签语法既不是字符串也不是HTML. 它被称为JSX ...

  7. Pyhton学习的基础

    函数->功能, 如print(),input(),range(), 方法->功能, 如index()(尽量不用此方法),find(),类里面的函数就叫做方法 容器->列表,字符串,元 ...

  8. JPA连接PG数据库时间类型查询报错的修改

    PG数据库中的时间格式规范: https://blog.csdn.net/sky_limitless/article/details/79527665 to_data 转换为 普通的时间格式 to_t ...

  9. Densely semantically aligned person re-identification

    Densely semantically aligned person re-identification https://arxiv.org/abs/1812.08967

  10. springMVC:为MultipartFilte配置了上传文件解析器,报错或不能使用

    一.问题描述为支持restful风格请求,并且应对可能上传文件的情况,需要在配置hiddenHttpMethodFilter过滤器之前配置MultipartFilter.目的是让MultipartFi ...