欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年09月08日 09:30:31   作者:qq_24849765  
本篇文章主要介紹了vue父子組件的嵌套的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

組件的注冊:

先創(chuàng)建一個構造器

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

用Vue.component注冊,將構造器用作組件(例為全局組件)

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

注冊局部組件:

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

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

注冊語法糖,簡化過程

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

// 局部注冊也可以這么做
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>

其與以下寫法等價:

<!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>


頁面顯示:


以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • Vue中this.$nextTick()方法的使用及代碼示例

    Vue中this.$nextTick()方法的使用及代碼示例

    $nextTick()是Vue.js框架中的一個方法,它主要用于DOM操作,當我們修改Vue組件中的數據時,Vue.js會在下次事件循環(huán)前自動更新視圖,并異步執(zhí)行$nextTick()中的回調函數,本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下
    2023-05-05
  • Vue PostCSS的使用介紹

    Vue PostCSS的使用介紹

    postcss一種對css編譯的工具,類似babel對js的處理,postcss只是一個工具,本身不會對css一頓操作,它通過插件實現功能,autoprefixer就是其一
    2023-02-02
  • vue3+ts深入組件Props實例詳解

    vue3+ts深入組件Props實例詳解

    Props是組件之間進行數據傳遞的一種方式,可以將數據從父組件傳遞給子組件,這篇文章主要介紹了vue3+ts深入組件Props的實例詳解,需要的朋友可以參考下
    2023-09-09
  • vue配置font-awesome5的方法步驟

    vue配置font-awesome5的方法步驟

    這篇文章主要介紹了vue配置font-awesome5的方法步驟,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • 基于webpack4+vue-cli3項目實現換膚功能

    基于webpack4+vue-cli3項目實現換膚功能

    這篇文章主要介紹了基于webpack4+vue-cli3項目的換膚功能,文中是通過scss+style-loader/useable做換膚功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-07-07
  • VUE實現可隨意拖動的彈窗組件

    VUE實現可隨意拖動的彈窗組件

    今天小編就為大家分享一篇VUE實現可隨意拖動的彈窗組件,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 修改el-form-item中的label里面的字體邊距或者大小問題

    修改el-form-item中的label里面的字體邊距或者大小問題

    這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue3中使用VueParticles實現粒子動態(tài)背景效果

    vue3中使用VueParticles實現粒子動態(tài)背景效果

    為了提高頁面展示效果,特別類似于登錄界面內容比較單一的,粒子效果作為背景經常使用到,vue工程中利用vue-particles可以很簡單的實現頁面的粒子背景效果,本文給大家分享vue粒子動態(tài)背景效果實現代碼,需要的朋友參考下吧
    2022-05-05
  • 關于Vue Router的10條高級技巧總結

    關于Vue Router的10條高級技巧總結

    這篇文章主要給大家總結介紹了關于Vue Router的10條高級技巧,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-05-05
  • 詳解vue-cli之webpack3構建全面提速優(yōu)化

    詳解vue-cli之webpack3構建全面提速優(yōu)化

    這篇文章主要介紹了詳解vue-cli之webpack3構建全面提速優(yōu)化,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12

最新評論