溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.組件是什么
組件系統是 Vue 的一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。通常一個應用會以一棵嵌套的組件樹的形式來組織；
1.1組件的聲明及使用
全局組件
<body>
<div id="app">
<!-- 用全局組件的名稱作為HTML的標簽 -->
<myzujian></myzujian>
</div>
</body>
<script>
//設置全局組件
Vue.component("myzujian",{
template:"<h3>我是全局組件</h3>"
});
var app=new Vue({
el:"#app",
});
</script>
局部組件
<body>
<div id="app">
<!-- 用局部組件的名稱作為HTML的標簽 -->
<zu-jian></zu-jian>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
components:{
zuJian:{
template:"<h2>我是局部組件</h2>",
}
}
});
</script>
1.2組件使用注意事項
組件名如果是駝峰法命名，使用組件時要將大寫字母改為小寫，并且在前面加上 - 組件中的tamplate屬性必須有一個唯一的根元素，否則會報錯
1.3組件中數據及方法
<body>
<div id="app">
<mytemp></mytemp>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{},
components:{
mytemp:{
data(){
return {
msg:"123456789",
}
},
methods: {
cli(){
alert(this.msg);
}
},
template:'<h2 @click="cli">you{{msg}} very good</h2>',
}
}
});
</script>
1.4父級組件傳值
<body>
<div id="app">
<my :cc="msg"></my>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{msg:'沒事干'},
components:{
my:{
props:['cc'],
template:"<s>{{cc}}</s>"
}
}
})
</script>
2.路由的使用
Vue在使用路由插件Vue-router，要提前引入。
<body>
<div id="app">
<ul>
<li> <router-link to="/login">登錄</router-link> </li>
<li> <router-link to="/reg">注冊</router-link> </li>
</ul>
<router-view></router-view>
</div>
</body>
<script>
// 獲取路由對象
var ro = new VueRouter({
// 定義路由規則
routes:[
// 具體匹配規則
// {path：匹配地址欄路由變化,component:要展示組件}
{path:'/reg',component:{template:"<s>我是注冊</s>"}},
{path:'/login',component:{template:"<s>我是登錄</s>"}},
]
})
var app = new Vue({
el: '#app',
data: {},
router:ro
})
</script>
2.1動態路由匹配
<body>
<div id="app">
<!-- 傳遞數據直接寫在 / 后面 -->
<router-link to="/user/10">hfhg</router-link>
<router-view></router-view>
</div>
</body>
<script>
var router = new VueRouter({
routes: [
{
// 獲取數據是變量的名字前面加:
path: "/user/:id", component: {
mounted(){
// router會為vue添加公有屬性 $route ，使用$route來獲取數據
console.log(this.$route.params.id)
},
template: "<s>就大師{{$route.params.id}}分離開國家</s>"
}
}
]
})
var app = new Vue({
el: '#app',
data: {},
router,
})
</script>
總結
以上所述是小編給大家介紹的Vue中的組件及路由使用實例代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
