Vue框架——页面组件中使用小组件

小组件在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>

原文地址:https://www.cnblogs.com/wangcuican/p/11650695.html

时间: 2024-10-08 02:02:52

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

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

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用-代替驼峰命名,HTML不区分大小写 </div> 子组件: Vue.component('child', { // camelCase in Ja

父组件中调用子组件的方法和属性

方案:利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法(注意2.0版本用ref取代了el) 1.当ref直接定义在dom元素上时,则通过this.$refs.name可以获取到dom,对dom进行原生的操作 <div class="foods-wrapper" ref="foods-wrapper"> 通过this.$refs获取到dom进行操作(注意ref属性的命名不能用驼峰,同时获取的时候也不能用) let menuList

Element Tabs 组件中使用 ve-histogram组件渲染不出来

Element Tabs 组件中使用 ve-histogram组件渲染不出来 发现问题提了issue,饿了么前端"西瓜"同学很快做了回复,饿了么大前端团队有沉淀很专业,赞. tip: GitHub 的用法与礼仪 心得:使用开源库发现问题时,先自己探索尝试各种情况,并留下痕迹,然后可以和相关方讨论.提issue eg,发现tab中嵌柱状图不能正常渲染(VIEW) , HTML(不能正常渲染的:width为0) HTML(能正常渲染的:width不为0) 据经验地图.图表等基于canvas

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

<FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <FormItem

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

先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟关系,在同一个父元素下渲染.现在我们要在点击A的时候调用B中的方法 解决思路:主要是用到ref获取BContainer组件挂载之后的实例 render(){ var b = null return(<BContainer ref={(node) => b = node}/>) } ref中的

iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件

这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件. 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组,如果该数组是异步动态生成的该组件不能正常渲染,因为在获取option数组之前table渲染时option是undefined. supportSelect(item) { item.render = (h, params)=>{ return h('Select', { props: { value: p

VUE -- iview table 组件 中使用 upload组件 上传组件 on render 事件不会触发问题

碰到的问题是: upload 组件在 on中写的监听事件不会被触发 在 props 中来监听:==> 原文地址:https://www.cnblogs.com/mafeng/p/11027356.html

【vue】---猫眼项目中使用js组件的时候-------loading 加载 无法移除的原因---------

认识loading是一个函数 没次执行loading 都会返回一个新vm. 类似于闭包??????????????????????????????????? 所以根本原因是   插入元素和删除 不是同一个.所以无法删除.需要让他们变成共一个对象才行. 变成同一个对象的方法是:保留, loading() 执行之后会有一个返回值,这个返回值就是vm 把loading换成 vm .这样  添加和删除都在同一个vm 上执行. 总结: 绑定同一个作用对象, 原文地址:https://www.cnblogs

python3-开发进阶Django-form组件中model form组件

Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的例子来看一下这个东西怎么用:比如我们的数据库中有这样一张学生表,字段有姓名,年龄,爱好,邮箱,电话,住址,注册时间等等一大堆信息,现在让你写一个创建学生的页面,你的后台应该怎么写呢?首先我们会在前端一个一个罗列出这些字段,让用户去填写,然后我们从后天一个一个接收用户的输入,创建一个新的学生对象,保存其实,重点不是这些,而是合法性验证,我们需要在前端判