vue全局组件与局部组件使用方法详解


Posted in Javascript onMarch 29, 2018

vue全局/局部注册,以及一些混淆的组件

main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div>

main.js文件

**main.js入口文件的内容**

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入公用组件的vue文件 他暴漏的是一个对象
import cpublic from './components/public'

Vue.config.productionTip = false

// 注册全局组件-要在vue的根事咧之前
// 参数 1是标签名字-string 2是对象 引入外部vue文件就相当与一个对象
Vue.component('public', cpublic)
// 正常注册全局组件的时候,第二个参数应该是对象。
Vue.component('public1', {
 template: '<div>正常的组件模式</div>'
})
/* eslint-disable no-new */
// 生成vue 的根实例;创建每个组件都会生成一个vue的事咧
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

public.vue 组件为定义的全局组件在任何组件里都可以直接使用,不需要在vue实例选项components上在次定义,也不需要再次导入文件路径。

**public.vue的组件内容**


<template lang="pug">
.wrapper
 slot(text="我是全局组件") {{name}}

</template>

<script>
export default {
 name: 'HelloWor',
 // 全局组件里data属性必须是函数,这样才会独立,
 // 在组件改变状态的时候不会影响其他组件里公用的这个状态
 data () {
  return {
   name: '我是全局组件'
  }
 }
}
</script>

<style scoped>

</style>

parent.vue组件里,用到了public全局组件以及其他的子组件

parent.vue组件

<template lang="pug">
.wrap
 .input-hd
  .title 名称:
  input.input(type="text",v-model="msg",placeholder="请输入正确的值",style="outline:none;")
 .content-detail
  .content-name 我是父组件的内容 
 children(:msg='msg', number='1')
 public
 router-link(to='/parent/children2') 第二个子组件
 router-view
</template>

<script>
import children from './children'
// children(:msg='msg', number='1')在组件里 也可以传递自定义的属性,但是是字符串类型,

export default {
 name: 'HelloWor',
 data () {
  return {
   // 通过prop将数据传递到子组件,并与v-model想对应的输入框相互绑定。
   msg: '这个是父组件的-prop-数据'
  }
 },
 components: {
  children
 }
}
</script>

<style scoped>
.wrap {
}
.input-hd {
 display: flex;
 flex-direction: row;
 align-items: center;
 height: 70px;
}
</style>

children.vue是parent.vue的子组件,但是只在parent.vue作用域里可用

<template lang="pug">
.wrapper
 slot(text="我是子组件的text") 我是子组件的内容
 .name {{ msg }} {{ number }}
</template>

<script>
export default {
 name: 'HelloWor',
 // 接受的时候是用props接受,数组的形式,里面是字符串的形式。
 // 也可以传入普通的字符串
 // 在子组件中,props接受到的状态当作vue的实例属性来使用
 props: [ 'msg', 'number' ]
}
</script>

<style scoped>

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
vue购物车插件编写代码
Nov 27 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
vue实现简单瀑布流布局
May 28 Javascript
javascript实现文件拖拽事件
Mar 29 #Javascript
vue 父组件调用子组件方法及事件
Mar 29 #Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 #Javascript
Vue 源码分析之 Observer实现过程
Mar 29 #Javascript
vue 实现全选全不选的示例代码
Mar 29 #Javascript
Angular开发实践之服务端渲染
Mar 29 #Javascript
使用vue2实现购物车和地址选配功能
Mar 29 #Javascript
You might like
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
取得传值的函数
2006/10/27 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
原生JavaScript实现刮刮乐
2020/09/29 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
python excel多行合并的方法
2020/12/09 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
某公司面试题
2012/03/05 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
医院工作检讨书范文
2014/02/10 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python