vue 引用其他組件
阿新 • • 發佈:2017-08-03
return div 技術 mit scrip gin 跳轉 pad port
1、在components 目錄下新建Test.vue 文件
<template> <div class="test"> <h1>{{ msg }}</h1> <router-link to="/login">跳轉到詳情頁</router-link> </div> </template> <script> export default { name: ‘test‘, data () { return { msg: ‘this.test uve‘ } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
2、在Hell.vue裏添加代碼引用Test.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> <!-- 引用的組件標簽 和下邊 import 的名稱保持一致 --> <test></test> </div> </template> <script> // 引用Test.vue 命名為test import test from ‘./Test‘ export default { name: ‘hello‘, // 引用組件 components:{ test }, data () { return { msg: ‘Welcome to Your Vue.js App‘ } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
運行結果:
vue 引用其他組件