Vue組件之間的嵌套

時間 2020-06-15

標籤 vue 組件之間嵌套简体版

原文原文鏈接

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

button {

width: 60px;

height: 30px;

font-size: 16px

}

.content {

width: 200px;

height: 100px;

border: 1px solid green;

margin-top: 5px;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

</ul>

</div>

<div>

</div>

</div>

</body>

// 建立登錄，註冊組件

Vue.component('patient', {

<div>

<p>這是個人病人頁面</p>

</div>`

})

Vue.component('Medical records', {

<div>

<p>這是個人病歷頁面</p>

</div>`

})

Vue.component('details', {

<div>

<p>這是個人詳情頁面</p>

</div>`

})

Vue.component('list', {

<div>

<p>這是個人列表頁面</p>

</div>`

})

Vue.component('patient', {

data () {

return {

conName2: 'details'

}

<div>

</div>`

})

var app = new Vue({

el: '#app',

data: {

// true 登錄；false 註冊

flag: false,

conName: 'patient' // 當前的conName 就是 component中的：is綁定的組件的名稱

}

})

// 總結：若是頁面中出現多個組件來回切換的效果，好比百度首頁的導航的切換，就能夠使用 <component :is='"組件的名稱"'></component>

</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。