精华内容
下载资源
问答
  • vue create vue-styled-components-example cd vue-styled-components-example 添加vue样式的组件 yarn add vue-styled-components 用法 基本的 带模板的Vue组件 // ./src/components/PageTitle.vue [removed] ...
  • 快速搞懂Vue里面components和template

    万次阅读 多人点赞 2019-08-12 00:59:33
    vue可以把内容变成组件化,然后提高复用性,那是怎样进行组件化,然后使用呢? 1.先写组件 2.引用组件 我们是单独写的一个js文件存放组件的所以它不是全局引用的,所以我就要把上面写好的registerForm组件引用过来...

    vue可以把内容变成组件化,然后提高复用性,那是怎样进行组件化,然后使用呢?

    1.先写组件

    在这里插入图片描述

    2.引用组件

    在这里插入图片描述
    我们是单独写的一个js文件存放组件的所以它不是全局引用的,所以我就要把上面写好的registerForm组件引用过来,在这里它的名字被我指定做了loginForm

    3.使用组件

    在这里插入图片描述
    上面我们只是 引用了,就好像声明一样,我还没有使用它,所以,要使用它就要在template:写出我们的引用后的组件名,每个组件都是一个标签,就想input ,radio一样,
    所以是。

    4.运行结果

    在这里插入图片描述

    5.易混淆点 Vue.component

    Vue.component 是注册全局组件,如果注册全局组件,我们就可以直接在html直接写了,全局可以。

    <div id="app">
        <!--使用定义好的全局组件-->
        <counter></counter>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // 定义全局组件,两个参数:1,组件名称。2,组件参数
        Vue.component("counter",{
            template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
            data(){
                return {
                    count:0
                }
            }
        })
        var app = new Vue({
            el:"#app"
        })
    
    6.运行结果

    在这里插入图片描述

    展开全文
  • vue components组件

    千次阅读 2020-08-20 18:54:10
    组件 组件系统是 Vue 的另一个重要概念,因为它是一种...这样的方式来使用组件,在挂载点内组件名称的地方,vue解析之后就会把组件的template模板的内容展示出来。 2.全局注册 局部注册的组件仅能在当前实例的挂载

    组件

    组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。

    1.局部注册

    new Vue({
    	el...
    	components:{
    		组件名称:{
    			template:"组件的模板内容"
    		}
    	}
    })
    

    使用:

    在挂载点内以<组件名>这样的方式来使用组件,在挂载点内组件名称的地方,vue解析之后就会把组件的template模板中的内容展示出来。

    2.全局注册

    局部注册的组件仅能在当前实例的挂载点内使用,如果需要在多个vue实例中使用同一个组件,就需要使用全局注册的方式来注册这个组件。

    语法:

    Vue.component('组件名',{template:"模板内容"})
    new Vue({})
    new Vue({})
    ...
    

    3.注意事项

    (1)Do not use built-in or reserved HTML elements as component id: div

    不能使用系统内置的标签名作为组件名

    组件名称使用系统内置的名字全大写也不行,浏览器会把大写字母解析成小写

    (2)Unknown custom element: - did you register the component correctly?

    组件未正确的注册就使用了

    如果组件名称中确实包含大写字母,在使用组件时,要把大写字母换成-小写字母

    (3)Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    组件的template中只能有一个根标签。

    4.template的使用

    vue中提供了一个template标签,它和其中的内容不会被浏览器直接解析出来。

    因为组件的template属性使用字符串方式进行编写,没有语法提示,编写起来不方便且不容易维护,所以我们可以把template属性和template标签结合起来使用。

    <div id="app">
            <one></one>
            <two></two>
        </div>
        <template id="one">
            <div>
                <h2>这是one组件的内容</h2>
                <p>这是一个段落</p>
            </div>
        </template>
        <template id="two">
            <div>
                <h3>这是two组件</h3>
            </div>
        </template>
        <script>
            new Vue({
                el:"#app",
                components:{
                    one:{
                        // 告知当前组件的template属性使用哪个template标签中的内容作为模板内容
                        template:"#one"
                    },
                    two:{
                        template:"#two"
                    }
                }
            })
        </script>
    

    5.组件中的data要是一个函数

    受数据类型的影响,对象类型数据复用时,会影响数据的变化,在组件中定义data时,不能使用对象类型,要使用函数,在函数中返回一个新的对象,这样在复用组件时,每使用一次就会返回一个新的对象空间来存储数据。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>template的使用</title>
        <script src="../../node_modules/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 直接使用vue根实例上的数据 -->
            <p>数量:{{ num }}<button @click="num++">增加</button></p>
            <p>数量:{{ num }}<button @click="num++">增加</button></p>
            <p>数量:{{ num }}<button @click="num++">增加</button></p>
            <hr>
            <!-- 复用组件 -->
            <v-count></v-count>
            <v-count></v-count>
            <v-count></v-count>
        </div>
        <template id="count">
            <p>数量:{{ num }}<button @click="num++">增加</button></p>
        </template>
        <script>
            var vCount = {
                template:"#count",
                data(){
                    return{ num:100 }
                }
            }
            new Vue({
                el:"#app",
                components:{ vCount},
                data:{ num:100 }
            })
        </script>
    </body>
    </html>
    
    展开全文
  • 1. 基本信息 ...组件里面的内容就是你模板的内容 ...components是一个对象,该对象的属性是组件的相关配置信息。 组件当中至少应该拥有template属性或render方法。 使用时,可以将组件的名字作为标签来使用。...

    1. 基本信息

    组件是对你 html 标签的一个拓展

    组件里面的内容就是你模板的内容

    组件分为全局组件局部组件

    • 对象当中定义的组件都是局部组件

    2. 如何定义(注册)组件

    1. 定义组件需要使用components选项。components是一个对象,该对象的属性是组件的相关配置信息。
    2. 组件当中至少应该拥有template属性或render方法。
    3. 使用时,可以将组件的名字作为标签来使用。

    注意

    • 当你的组件名称当中使用驼峰命名时,在使用组件时,名字小写与大写之间应该用-来分割。
    • 组件当中的数据,与其外部的实例是不共享的。
    • 在组件内定义的数据(data)
      1. 必须要是一个函数
      2. 函数必须要有返回值
      3. 返回值必须要是一个对象
    1. 局部组件
    <Zujian></Zujian>  // html 中可以使用已经定义好的组件
    
    new Vue({
    	el:"#root",
    	data:{
    	... ...
    	},
    	components:{     //可以看到 components 是复数形式,说明我们可以在这里面定义多个组件
    	Zujian:{         //定义了一个名字为 zujian 的组件  //它是一个对象形式
    		template:`<div>定义了一个组件,名字为 zujian </div>`    //组件具体内容
    		}
    	}
    })
    
    1. 全局组件
    Vue.component('Zujian', {    //在 new Vue 之外书写 // script 中书写
      template: `<div>定义了一个组件,名字为 zujian </div> `
    })
    
    <Zujian></Zujian>  // html 中可以使用已经定义好的组件
    
    1. 引入外部组件
    //引入外部组件
    <script>
    import Zujian from './components/zujian.js'
    
    export default{
    	data(){
    		return{
    			... ...
    		}
    	},
    	components:{
    		Zujian
    	}
    }
    </script>
    
    //外部组件
    <template>
    	<div>hello world!!!</div>
    <template>
    
    <script>
    	... ...
    </script>
    
    展开全文
  • Vue引入components以及父子组件方法调用和参数传递 父组件parent.vue引入 组件 child.vue // 父组件引入子组件 <template> <div> <dataSource @getLink="getMyLink" :objData="data" ref=...

    Vue引入components以及父子组件方法调用和参数传递

    父组件parent.vue引入 组件 child.vue

    // 父组件引入子组件
    <template>
      <div>
        <dataSource @getLink="getMyLink" :objData="data"  ref="dataSource"></dataSource>
        <el-button @click="getDataSource">获取</el-button>
      </div>
    </template>
    
    <script>
    import dataSource from '../components/data-source'
    export default {
      name: "parent",
      components: { dataSource},
      data() {
        return {
          data:{name:'222'},
        };
      },
      methods: {
        // 父组件方法
        getMyLink(item){
          console.log('父子组件方法',item)
        },
        // 父组件方法
        getDataSource(){
        // 父组件调用子组件handleSubmit()方法, dataSource 为子组件ref的值
          const aa=this.$refs.dataSource.handleSubmit();
        }
      },
    };
    </script>
    

    子组件 child.vue

    //子组件 child.vue
    <template>
      <div>
          <avue-form
            :option="option"
            ref="form"
            v-model="form"
            @submit="handleSubmit"
          >
            <template slot-scope="scope" slot="path">
              <el-cascader :props="props" v-model="form.path"></el-cascader>
            </template>
          </avue-form>
      </div>
    </template>
    <script>
    export default {
      name: "dataSource",
      //属性参数
       props: {
        objData:{
            type:Object
        }
      },
      data() {
      },
       methods: {
        // 子组件中
        getPre(item){
          //通过 getLink 调用父组件方法 item 为数组
          this.$emit('getLink', item);
          //使用父组件传递过来的属性参数
          console.log('objData',this.objData)
        },
      }
    }
    
    展开全文
  • vue 自定义components

    千次阅读 2018-06-03 13:59:26
    使用vue编写界面的时候,我们需要把一个界面里面的不同功能进行拆分,拆分到其他的文件里面,这样的逻辑更加清晰,不多说了,直接上代码,看下如何进行拆分:&lt;template&gt; &lt;div &gt; &...
  • Vue.components模块的使用方式

    千次阅读 2019-04-12 16:41:30
    在我们开发的过程会遇到很多可以重复使用的代码块,而Vue则提供了这样的封装方式也就是Vue.component 它里Vue模块的一种声明方式,也相当于一个小的Vue文件,它也有类似真正的Vue文件一样的生命周期,比如说 ...
  • Vue中的深坑——component和components

    千次阅读 2019-11-21 21:49:19
    components呢,是在Vue的实例对象用于注册组件时使用的。最主要的是什么呢,主要是webstorm里面在父组件写component的时候,会直接出现component,而不是components 哎代码一遍一遍检查真累!
  • 1:引入组件 import headTop from ‘…/…/components/headTop’ ...父组件传递数据子组件 , 父组件在模板调用子组件 父组件:负责创建数据并且传递子组件 , 需要路径 子组件:负责显示数据 , 不要需指定路径 S...
  • vue-cli-plugin-import-components 摇动树木即可自动将组件导入Vue CLI应用程序,从而支持Vue 2和3。 为什么和如何? 结帐我的为什么这个功能存在,它是如何工作和问题。 特征 :mage: Vue 2和3支持并带有完整的...
  • 浅谈Vue下的components模板

    万次阅读 2018-05-30 14:03:59
    浅谈Vue下的components模板 晴 微风 温度 12-24°C 在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单的写一...
  • vue路由的component和components的区别

    千次阅读 2020-10-13 11:14:14
    今天一上午都耗在了这里,本来想写一个404页面的,但是写好后怎么都跳转不过去,最后才发现把component写成了components,还是vscode直接提示我的,我根本没发现!...再顺手贴一篇vue中容易混淆的单词 总结componen
  • @quannt在vuejs内置的示例Web组件 该小部件是使用并使用编译成一个Web组件。 最终的构建文件位于dist文件夹下。 您可以从localhost提供index.html来查看运行的小部件。 构建设置 # install dependencies $ ...
  • Vue 项目的 main.js 写入以下内容: import Vue from 'vue' <!-- 引入组件JavaScript文件 --> import 'vue-mapboxgl-components' <!-- 引入组件CSS文件,如果没有CSS,Popups和Markers等元素将无效。 ...
  • vue components 注册方法

    千次阅读 2017-08-29 09:58:24
    第一步 在主页面import import shopcart from '../shopcart/shopcart'; import cartcontrol from '../cartcontrol/cartcontrol';第二步 在 JS里面调用组件 components: { shopcart, cartcontrol }, 第三
  • vue-response-components使用ResizeObserver创建响应组件。 想法请查看我在ITNEXT安装上的帖子npm install vue-sensitive-c vue-response-components使用ResizeObserver创建响应性组件。 想法看看我在ITNEXT安装上的...
  • 例如,我们如果只是简单的在components下面建一个文件夹common,并把组件放在common下面,那么在引用的时候,会提示错误, 这个时候,解决方案如下: 在 build\webpack.base.conf.js resolve添加 ‘common’: ...
  • 关于vue项目 components: { App }, template: '<App/>'的理解 原代码: 效果: 根据名字猜想 new Vue({ el: '#app', router: router, components: { App }, template: '<App/>' }); ...
  • VUE components 自定义组件

    千次阅读 2018-08-31 17:09:14
    vue编写界面,拆分功能,简化当前文件的逻辑功能。 1、定义单机动作; 2、指向 3、自定义组件 命名问题:HTML特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCased(驼峰式)命名的prop...
  • vue中英文切换键盘

    2018-11-19 10:32:32
    vue中英文切换虚拟键盘键盘,直接引入可以用,使用方法 import keyborad from "@/components/vitualKeyboard/keyboard.vue"; components{ keyborad } 请输入name'" @getSearchValue="方法名接受键盘输入的值">...
  • 一、组件(vue文件)的组成结构 <!--页面模板--> <template> <div> {{msg}}</div> </template> <!--JS 模块对象--> <script> export default { data () { return {...
  • 1、找到.eslintrc.js这个文件 2、然后再rules添加如下配置 "vue/html-self-closing": ["error",{ "html": { "void": "never", "normal": "any", "component": "any" }, "svg": "always", ...
  • vue-styled-components

    千次阅读 2018-04-21 14:20:40
    1. 安装npm install vue-styled-components2. 在一个组件引入&lt;template&gt; &lt;div&gt; &lt;StyleButton background='#000'&gt;马上投标&lt;/StyleButton&gt; &lt;/...
  • 请问以下代码template的sidebar是如何与script的Sidebar关联起来的呢?初学vue.js,很多东西不是太懂,官网上也没搜到答案 还望前端大神不吝赐教,在此先行谢过。 ``` !sidebar.opened}"> ...
  • Vue找到任意组件实例—findComponents

    千次阅读 2019-02-18 11:17:37
    Vue找到任意组件实例—findComponents 它适用于以下场景: · 由一个组件,向上找到最近的指定组件; · 由一个组件,向上找到所有的指定组件; · 由一个组件,向下找到最近的指定组件; · 由一个组件,向下找到...
  • 一个vue页面使用多个components

    万次阅读 2019-01-07 11:06:31
    第一步: 在compoents目录下创建多个组件;     第二步: 在App.vue中添加多个router-view标签,别忘了写name;       第三步:修改router目录下的index.js文件;  ...
  • vue中computed的作用以及用法

    千次阅读 2019-05-31 16:41:00
    vue中computed是计算属性,主要作用是把数据存储到内存,减少不必要的请求,还可以利用computed给子组件的data赋值。 参考地址:https://www.jianshu.com/p/ff708a773dc0 // 父组件 <template> <...
  • vue中keepAlive组件的作用及使用方式

    万次阅读 多人点赞 2019-04-18 15:22:42
    在面试的时候,很多面试官再问vue的时候可能就会提一嘴,你知道keep-alive有什么作用吗? keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的...
  • 没想到用了vue这就久了,能遇到这种神奇的问题,记录一下。。。 项目是多入口的打包方式,所以有多个router来写路由 在其中一个入口分支的所有相关页面都没有 引入的组件的样式。这个样式是写在 components 里面的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 126,488
精华内容 50,595
关键字:

vue中components的作用

vue 订阅