vue自定义公共组件

vue自定义公共组件我们在编写页面的时候,会存在公共的组件,比如头部和底部菜单我们拿公共头部为例子,想在每个页面都显示公共头部的实现方式有两种在src/components目录创建目录 common, 再创建header.vueheader.vue的片段代码为<template><div><h1>header in

Hobart-Ljw

12601人浏览 · 2018-05-23 11:39:58

Hobart-Ljw · 2018-05-23 11:39:58 发布

 
 vue自定义公共组件 

  我们在编写页面的时候,会存在公共的组件,比如头部和底部菜单 

  我们拿公共头部为例子,想在每个页面都显示公共头部的实现方式有两种 

 
 在src/components目录创建目录 common, 再创建header.vue 

  header.vue的片段代码为 

 
 <template> 

 
  <div> 

 
  <h1>header in here</h1> 

 
  </div> 

 
 </template> 

 
 <script> 

 
  export default{} 

 
 </script> 

 
 (1)全局挂载组件 

  在main.js里挂载 
 ,通过Vue.component方式 

  import headerTop from "xxx/components/common/header" //引入组件 

  Vue.component("head-view",headerTop); 

  //第一个参数表示 head-view标签的内容都用第二个参数headerTop来代替 

  然后在需要使用的vue文件中引入头部的话,只需要加入 <head-view></head-view>标签 

 
 (2)局部引入,需要用的时候才引入使用 

  在需要使用的VUE文件中引入头部: 

  代码片段 

  <template> 

  <headerTopNav></headerTopNav> 

  </template> 

  <script> 

  import headerTopNav from 'xxx/components/common/header' //引入组件 

  export default{ 

  components: {headerTopNav} //表示headerTopNav标签的内容被headerTopNav组件代替 

}

  </script> 

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^