Vue注册全局组件的步骤
(1) 写组件
(2)定义组件的名称 和数据
(3)在main.js中引入
(4)Vue.component("my-bread", MyBread);注册
1==》新建文件夹(cuscom) 文件(myBread.vue)
在myBread.vue文件如下
{ <template> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item> <a href="/">{{value1}}</a> </el-breadcrumb-item> <el-breadcrumb-item>{{value2}}</el-breadcrumb-item> </el-breadcrumb> </template> <script> // 自定义组件 面包屑 export default { name: "my-bread", //给组件起一个名字 data() { return {}; }, // props外界来的数据 // props值是字符串数组 // props中的数据的值，来源于使用组件时 传递的值 props: ["value1", "value2"] }; </script> }
2==>在main.js中导入组件 在main.js 组件 注册
import MyBread from "@/components/cuscom/myBread.vue"; Vue.component("my-bread", MyBread); //注册组件
3==》在某个文件中使用
<my-bread value1="权限管理" value2="权限列表"></my-bread>
可以将上面的方式优化一下
组件的名字应该是写组件的人提供的
将上面的优化一下
1==》其他不变
{ <script> // 自定义组件 面包屑 export default { name: "my-bread", //给组件起一个名字 new add data() { return {}; }, // props外界来的数据 // props值是字符串数组 // props中的数据的值，来源于使用组件时 传递的值 props: ["value1", "value2"] }; </script> } 2==> // MyBread是一个对象 import MyBread from "@/components/cuscom/myBread.vue"; Vue.component(MyBread.name, MyBread); //注册组件 3==> <my-bread value1="权限管理" value2="权限列表"></my-bread>
