vue父子組件的嵌套的示例代碼

更新時(shí)間：2017年09月08日 09:30:31 作者：qq_24849765

本篇文章主要介紹了vue父子組件的嵌套的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了vue父子組件的嵌套的示例代碼，分享給大家，具體如下：

組件的注冊(cè)：

先創(chuàng)建一個(gè)構(gòu)造器

var myComponent = Vue.extend({
  template: '...'
})

用Vue.component注冊(cè)，將構(gòu)造器用作組件(例為全局組件)

Vue.component('my-component' , myComponent)

注冊(cè)局部組件：

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
 template: '...',
 components: {
  // <my-component> 只能用在父組件模板內(nèi)
  'my-component': Child
 }
})

注冊(cè)語法糖，簡化過程

// 在一個(gè)步驟中擴(kuò)展與注冊(cè)
Vue.component('my-component', {
 template: '<div>A custom component!</div>'
})

// 局部注冊(cè)也可以這么做
var Parent = Vue.extend({
 components: {
  'my-component': {
   template: '<div>A custom component!</div>'
  }
 }
})

父子組件嵌套的例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>index</title>
</head>
<body>
<div id="app">
  <parent></parent>
</div>
<script src="vue.js"></script>
<script>
  var childComponent = Vue.extend({
    template: '<p>this is child template</p>'
  });
  Vue.component("parent",{
    template: '<p>this is parent template</p><child></child><child></child>',
    components: {
      'child': childComponent,
    }
  });
  var app = new Vue({
    el: '#app'
  });
</script>
</body>
</html>

其與以下寫法等價(jià)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>index</title>
</head>
<body>
<template id="child">
  <p>this is child template</p>
</template>
<template id="parent">
  <p>this is parent template</p>
  <child></child>
  <child></child>
</template>
<div id="app">
  <parent></parent>
</div>
<script src="vue.js"></script>
<script>
  var childComponent = Vue.extend({
    template: '#child'
  });
  Vue.component("parent",{
    template: '#parent',
    components: {
      'child': childComponent,
    }
  });
  var app = new Vue({
    el: '#app'
  });
</script>
</body>
</html>

頁面顯示：

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE更換背景顏色的方法
這篇文章主要介紹了VUE更換背景顏色的方法,?在這個(gè)示例中,我們使用了一個(gè)backgroundColor變量來存儲(chǔ)當(dāng)前頁面的背景顏色,當(dāng)用戶點(diǎn)擊按鈕時(shí),我們通過調(diào)用setBackgroundColor方法來更改背景顏色,并將背景顏色同時(shí)應(yīng)用于body元素,需要的朋友可以參考下
2024-03-03
vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
基于vue-cli3創(chuàng)建libs庫的實(shí)現(xiàn)方法
這篇文章主要介紹了基于vue-cli3創(chuàng)建libs庫的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
vue點(diǎn)擊當(dāng)前路由高亮小案例
這篇文章主要為大家詳細(xì)介紹了vue點(diǎn)擊當(dāng)前路由高亮小案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
vue跳轉(zhuǎn)頁面的幾種常用方法代碼示例
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面的幾種常用方法,vue跳轉(zhuǎn)頁面有好幾種不同方法,文中通過代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-10-10
vue如何獲取光標(biāo)位置
這篇文章主要介紹了vue獲取光標(biāo)位置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vuex的使用及知識(shí)點(diǎn)筆記
這篇文章主要介紹了Vuex的使用及知識(shí)點(diǎn)筆記，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧
2022-08-08
Vue關(guān)鍵字搜索功能實(shí)戰(zhàn)小案例
在vue項(xiàng)目中,搜索功能是我們經(jīng)常需要使用的一個(gè)場景,下面這篇文章主要給大家介紹了關(guān)于Vue關(guān)鍵字搜索功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
Vue編程三部曲之將template編譯成AST示例詳解
這篇文章主要為大家介紹了Vue編程三部曲之將template編譯成AST示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07