快捷導(dǎo)航

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

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

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

本文介紹了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è)語(yǔ)法糖，簡(jiǎn)化過(guò)程

// 在一個(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>

其與以下寫(xiě)法等價(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>

頁(yè)面顯示：

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

您可能感興趣的文章:

相關(guān)文章

Vue中this.$nextTick()方法的使用及代碼示例
$nextTick()是Vue.js框架中的一個(gè)方法，它主要用于DOM操作，當(dāng)我們修改Vue組件中的數(shù)據(jù)時(shí)，Vue.js會(huì)在下次事件循環(huán)前自動(dòng)更新視圖，并異步執(zhí)行$nextTick()中的回調(diào)函數(shù)，本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下
2023-05-05
Vue PostCSS的使用介紹
postcss一種對(duì)css編譯的工具，類(lèi)似babel對(duì)js的處理，postcss只是一個(gè)工具，本身不會(huì)對(duì)css一頓操作，它通過(guò)插件實(shí)現(xiàn)功能，autoprefixer就是其一
2023-02-02
vue3+ts深入組件Props實(shí)例詳解
Props是組件之間進(jìn)行數(shù)據(jù)傳遞的一種方式，可以將數(shù)據(jù)從父組件傳遞給子組件，這篇文章主要介紹了vue3+ts深入組件Props的實(shí)例詳解,需要的朋友可以參考下
2023-09-09
vue配置font-awesome5的方法步驟
這篇文章主要介紹了vue配置font-awesome5的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
基于webpack4+vue-cli3項(xiàng)目實(shí)現(xiàn)換膚功能
這篇文章主要介紹了基于webpack4+vue-cli3項(xiàng)目的換膚功能,文中是通過(guò)scss+style-loader/useable做換膚功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
VUE實(shí)現(xiàn)可隨意拖動(dòng)的彈窗組件
今天小編就為大家分享一篇VUE實(shí)現(xiàn)可隨意拖動(dòng)的彈窗組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
修改el-form-item中的label里面的字體邊距或者大小問(wèn)題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue3中使用VueParticles實(shí)現(xiàn)粒子動(dòng)態(tài)背景效果
為了提高頁(yè)面展示效果，特別類(lèi)似于登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面的粒子背景效果，本文給大家分享vue粒子動(dòng)態(tài)背景效果實(shí)現(xiàn)代碼，需要的朋友參考下吧
2022-05-05
關(guān)于Vue Router的10條高級(jí)技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Vue Router的10條高級(jí)技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化
這篇文章主要介紹了詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12