Vue全局组件与局部组件详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue全局组件与局部组件详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5208字，纯文字阅读大概需要8分钟。

内容图文

本文主要介绍了Vue组件之全局组件与局部组件的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以is特性扩展。个人认为就是一个可以重复利用的结构层代码片段。

全局组件注册方式：Vue.component(组件名,{方法})

eg:

<body>
<p id="app">
<my-component></my-component>
</p>
<p id="app1">
  <my-component></my-component>

</p>
<script>
Vue.component("my-component",{
  template:"<h1>我是全局组件</h1>"
});
new Vue({
  el:"#app"
});
new Vue({
  el:"#app1"
})
</script>
</body>

渲染结果：

<p id="app">
  <h1>我是全局组件</h1>
</p>
<p id="app1">
  <h1>我是全局组件</h1>
</p>

这里需要注意：

1.全局组件必须写在Vue实例创建之前，才在该根元素下面生效；

eg:

<body>
<p id="app">
  <my-component></my-component>
</p>
<p id="app1">
  <my-component></my-component>

</p>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

这样只会渲染app1根元素下面的，并不会渲染app根元素下面的，并且会报错。

2.模板里面第一级只能有一个标签，不能并行；

<body>
<p id="app">
  <my-component></my-component>
</p>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>" +
    "<p>我是全局组件内标签</p>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

这样子会报错，并且只会渲染第一个标签h1;我们应该这样子写：

<body>
<p id="app">
  <my-component></my-component>
</p>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件<p>" +
    "我是全局组件内标签</p></h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

局部组件注册方式，直接在Vue实例里面注册

eg:

局部组件需要注意：

1.属性名为components，s千万别忘了;

2.套路比较深，所以建议模板定义在一个全局变量里，代码看起来容易一点，如下：（模板标签比较多的时候，这样子写更加简洁规整）

<body>
<p id="app1">
  <child-component></child-component>
</p>
<script>
  var child={
    template:"<h1>我是局部组件</h1>"
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  });
</script>
</body>

关于组件中的其他属性，可以和实例中的一样，但是data属性必须是一个函数：

eg:

<body>
<p id="app1">
  <child-component></child-component>
</p>
<script>
  var child={
    template:"<button @click='add2'>我是局部组件:{{m2}}</button>",
    data:function(){
      return {m2:1}
    },
    methods:{
      add2:function(){
        this.m2++
      }
    }
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  })
</script>
</body>

显示结果：

Vue全局组件与局部组件详解 - 文章图片

全局组件和局部组件一样，data也必须是一个函数：

<body>
<p id="app1">
  <my-component></my-component>
</p>
<script>
  Vue.component("my-component",{
    template:"<button @click='add1'>全局组件：{{m1}}</button>",
    data:function(){
      return {
        m1:10
      }
    },
    methods:{
      add1:function(){
        this.m1++
      }
    }
  });
  new Vue({
    el:"#app1"
  })
</script>
</body>

显示结果：

Vue全局组件与局部组件详解 - 文章图片

当使用 DOM 作为模板时 (例如，将el选项挂载到一个已存在的元素上)，你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素<ul>，<ol>，<table>，<select>限制了能被它包裹的元素，而一些像<option>这样的元素只能出现在某些其它元素内部。

自定义组件<my-row>被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性：

eg:

<body>
<p id="app1">
<ul>
  <li is="my-component"></li>
</ul>
</p>
<script>
 Vue.component("my-component",{
   template:"<h1>{{message}}</h1>",
   data:function(){
     return {
       message:"hello world"
     }
   }
 });
 new Vue({
   el:"#app1"
 })
</script>
</body>

渲染结果为：

Vue全局组件与局部组件详解 - 文章图片

对于全局与局部的作用域问题，我们可以这样理解，只要变量是在组件内部用的，这些变量必须是组件内部的，而在外部html结构中引用的变量，都引用的是该挂载下的实例里面的变量

eg:

<body>
<p id="app1">
<my-component></my-component>
</p>
<script>
 Vue.component("my-component",{
   template:"<button @click='add3'>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   },
   methods:{
     add3:function(){
       alert("我是局部")
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>

弹出框显示：我是局部

Vue中所谓的全局指的是该挂载下的区域；

下面这种做法是错误的，按我的想法觉得应该会弹出：我是全局，但是却报错，也就是说组件处于全局下不可以添加默认事件，要用全局的事件函数，必须父子通信

<body>
<p id="app1">
<my-component @click="add3"></my-component>
</p>
<script>
 Vue.component("my-component",{
   template:"<button @click='add3'>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>

额外话题：

1.函数return后面必须跟返回的内容，不能换行写

eg:

Vue全局组件与局部组件详解 - 文章图片

下面这种写法不会返值回来：

Vue全局组件与局部组件详解 - 文章图片

2.Vue和小程序等一样，采用es6的函数写法，this指向是不一样的

<body>
<p id="app1">
  <button @click="f">ES5</button>
  <button @click="f1">ES6</button>
</p>
<script>
new Vue({
  el:"#app1",
  methods:{
    f:function(){
     console.log(this)
    },
    f1:()=>{
      console.log(this)
    }
  }
})
</script>
</body>

结果：

第一个this指的是Vue实例

第二个this指的是Window

Vue全局组件与局部组件详解 - 文章图片

由于它和小程序不一样，我发现在data里面this指的是window，在methods里面this才是Vue实例

所以建议大家用es5写吧

Vue全局组件与局部组件详解 - 文章图片

内容总结

以上是互联网集市为您收集整理的Vue全局组件与局部组件详解全部内容，希望文章能够帮你解决Vue全局组件与局部组件详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/295532.html

来源：【匿名】

【上一篇】Vue实现数字输入框中分割手机号码实例教程【下一篇】php怎么返回数据给vue

更多 ►

【Vue全局组件与局部组件详解】教程文章相关的互联网学习教程文章

【安装步骤】一、安装node.js（node-v12.16.1-x64.msi）1.前往node.js官网下载并安装工具，这里安装路径选到D盘，D:\Program Files\nodejs 安装完毕后在命令行输入以下命令测试是否安装成功，正确会出现版本号npm -v2.改变原有的环境变量， (1)配置npm的全局模块的存放路径以及cache的路径，例如两个文件夹放在NodeJS的主目录下，便在NodeJs下建立"node_global"及"node_cache"两个文件夹，输入以下命令改变npm配置npm config set ...

vuex的使用详解大全【代码】【图】

引言：vue的vuex是一个全局状态管理工具，有强大的社区所贡献，方便达到一端改变全局改变功能，这里就不强调如何使用了，单独讲解一下如何更好的使用这个工具。先说一下这个使用的场景，如果仅是父子组件传值这个大可不必使用，当你用本地存储和广播事件都不能满足你的需求时，你就可以考虑使用vuex来管理你的数据了。使用方法：import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) let state = { //vuex的状态对象 ...

vuex基础详解及项目实例【代码】【图】

1、概念Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件，它包括State（数据源）、Getters（计算属性）、Modules（模块）、Mutations（事件）、Action（事件）。Action与Mutation的区别在于Mutation可以更改State，所以当Action要更改状态时通常是提交到Mutation中更改。2、安装2.1、安装完vue后就可安装vuex，本次示例建立在安装了vue-cli脚手架工具的基础上。安装vuex方法为在命令行输入：npm install vu...

【转】vue.js表单校验详解【代码】【图】

1.npm安装vue-validator$ npm install vue-validator代码示例:var Vue=require("vue"); var VueValidator=require("vue-validator"); Vue.use(VueValidator);2.直接使用script标签引入vue.js要下载vue-validator，那么进入cdn的地址https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js把内容复制下来就好了。版本使用了2.1.3，不要搞错了哦。下面是简单的小例子。<!DOCTYPE html><html lang="en"><head><meta charset="...

Vue中axios的使用技巧配置项详解【代码】

使用axios首先要下载axios模块包npm install axios --save其次需要在使用的文件中引入import axios from ‘axios‘一、调用axios常见两种方法(此处使用easy-mock模拟数据接口)：//方法1axios({method: ‘post‘,url:‘http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios‘}).then((response)=>{console.log(response.data)}).catch((error)=>{console.log(error)})//方法2axios.post(‘http://easy-mock.c...

vue路由导航守卫及前置后置钩子函数参数详解【代码】【图】

首先构建一个测试demo如下图:接着来探讨路由配置界面import Vue from ‘vue‘ import Router from ‘vue-router‘ // import HelloWorld from ‘@/components/HelloWorld‘ Vue.use(Router)const router = new Router({routes: [{path: ‘/‘,name: ‘HelloWorld‘,component: resolve => require([‘@/components/HelloWorld‘], resolve)}, {path: ‘/login‘,name: ‘login‘,component: resolve => require([‘@/components/lo...

Vue事件修饰符，.capture关键字详解【代码】

.prevent 用于阻止默认事件，点击a标签href可以打开相应的链接，那么给事件加上此关键字，click.prevent .capture 冒泡顺序例如 div1中嵌套div2中嵌套div3<div id="app" v-on:click="show">1<div id="app2" v-on:click.capture="show2">2<div id="app3" v-on:click="show3">3</div></div></div><script type="text/javascript">var vm=new Vue({el:"#app",data:{},methods:{show:function(){console.log("这是app的方法...

app.vue详解【代码】

App.vue是项目的主组件，页面入口文件，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集。1、app.vue作为主组件在main.js中被使用import Vue from ‘vue‘ import App from ‘./App.vue‘Vue.config.productionTip = falsenew Vue({render: h => h(App), }).$mount(‘#app‘)2、主组件app.vue调用其他组件，构建页面<template><div id="app"><MyTest/></div> </template><script> // 其他组件 import MyTest f...

vue项目详解【代码】【图】

目录创建Vue项目Vue项目环境搭建#Vue项目创建#pycharm配置并启动vue项目#vue项目目录结构分析#项目生命周期添加组件-路由映射关系文件式组件结构配置全局css样式子组件的使用组件的生命周期钩子路由逻辑跳转路由传参配置问号携带参数 : ?id=1#路由有名分组携带参数: /course/1/detail#创建Vue项目Vue项目环境搭建#Copy1) 安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/2) 换源安装cnpm >: npm install -g cnpm -...

Vue.directive添加全局指令详解

自定义指令创建：Vue.directive( ‘mycolor(指令名称:推荐全部小写，驼峰命名会出现问题，看最后面)‘ , {　　bind:function(){},　　//本例只介绍inserted　　inserted:function(el, binding){　　　　el.style.color="red"; // 第一种使用　　　　el.style.color=binding.value; // 第二种使用　　　　//el: dom元素; binding: 一个对象，里面包含着vue实例data里面的数据　　},　　update:function(){},　　compinentUpdated:fu...

详解使用vue实现tab 切换操作【代码】

详解使用vue实现tab 切换操作转载 https://www.jb51.net/article/117622.htm 这篇文章主要介绍了详解使用vue实现tab操作,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧在使用jQuery类库实现tab功能时，是获取鼠标在mousenter或click时的index值，然后切换到当前的标题和内容，把其他的标题和内容的状态去掉：$(‘.tab .title‘).find(‘.item‘).removeClass(‘current‘).eq(index).addClass(‘...

蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解【图】

2020 年真的是灾祸频发，但是在各类前端框架上，依旧是在稳步的推进。近日 Vue 团队更新了关于 Vue 3 的最新状态，尤大新增了三个语法糖特性，它们将用于优化 SFC 的开发体验，你会有兴趣尝鲜试试么～登高远眺天高地迥，觉宇宙之无穷前端框架Vue 3: 2020 年中的状态更新近日 Vue3 团队对 Vue 3 的状态进行了更新，介绍了各个主要工具的开发进度。整体计划是 7 月中旬推出 RC 版本，8 月早些时候能够推出正式版。在各工具在密锣紧鼓...

详解Vuex常见问题【代码】

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。　　使用Vue开发项目时，通常我们就会遇到如下几种棘手的问题：　　问题1：通过路由传递参数，我们会采用params或者query形式，但这两种方式都会在URL上做手脚，如果传递的参数过多，会导致400 Bad Request（如：点击表格某行，携带行数据跳转到新页面进行查看）。　　问题2：...

详解vue组件的is特性：限制元素&动态组件【代码】【图】

在vue.js组件教程的一开始提及到了is特性　　意思就是有些元素，比如 ul 里面只能直接包含 li元素，像这样：<ul><li></li> </ul> //而不能： <ul><your-component> </ul>　　这样就不能复用your-component这个组件了，如果要达到我们的目的，我们就要使用is特性像这样：<ul><li is="your-component"></li> </ul>　　组件功能是vue项目的一大特色。组件可以扩展html元素，可以封装可重用的代码，可以增加开发效率。它是自定义元素，...

详解vue如何使用rules对表单字段进行校验【图】

1、在代码中，添加属性：:rule?123456789101112131415161718<Formref="loginForm":model="form":rules="rules"@keydown.enter.native="handleSubmit"class="form-con"> <FormItemprop="phone"> <Inputv-model="form.phone"prefix="md-person"placeholder="请输入您的手机号"size="large"class="login-form-input":maxlength="11"></Input> </FormItem> <FormItemprop="password"> ...

首页 / VUE / Vue全局组件与局部组件详解

Vue全局组件与局部组件详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue全局组件与局部组件详解】教程文章相关的互联网学习教程文章

安装(c)npm及搭建Vue项目详解【代码】【图】

vuex的使用详解大全【代码】【图】

vuex基础详解及项目实例【代码】【图】

【转】vue.js表单校验详解【代码】【图】

Vue中axios的使用技巧配置项详解【代码】

vue路由导航守卫及前置后置钩子函数参数详解【代码】【图】

Vue事件修饰符，.capture关键字详解【代码】

app.vue详解【代码】

vue项目详解【代码】【图】

Vue.directive添加全局指令详解

详解使用vue实现tab 切换操作【代码】

蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解【图】

详解Vuex常见问题【代码】

详解vue组件的is特性：限制元素&动态组件【代码】【图】

详解vue如何使用rules对表单字段进行校验【图】

VUE - 相关标签

组件 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程