Vue註冊全局組件的步驟
(1) 寫組件
(2)定義組件的名稱 和數據
(3)在main.js中引入
(4)Vue.component("my-bread", MyBread);註冊vue
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>