Vue組件系統

時間 2019-11-08

標籤 vue 組件系統简体版

原文原文鏈接

　　Vue組件系統之全局組件的註冊

　　Vue組件系統之組件的複用

　　Vue組價系統之局部組件的註冊

　　Vue組件系統之父子組件的通訊

　　Vue組件系統之子父組件的通訊

　　Vue組件系統之混入（mixin）

　　Vue組件系統之插槽<slot></slot>

　　Vue組件系統之具名插槽

　　作專業的程序員看專業的官方文檔　　html

Vue組件系統之全局組件的註冊

<div id='app'>
 <global-component></global-component>
</div>
 
<script>
    // 註冊
    Vue.component(
        // 第一個是組件名稱 第二個object
        "global-component", {
            // 組件內容 抱一個div-單個根元素
            template: `<div><h3>{{ db }}</h3></div>`,
            // data必須是函數
            data(){
                // return中寫數據
                return {
                    db: 'hello',
               }
           }
       }
   );
    
    new Vue({
        el: '#app',
        // template: `<global-component></global-component>`
   })
</script>

<div id='app'>
 
</div>
 
<script>
    // 註冊組件
    Vue.component(
        // 第一個是組件名稱 第二個object
        "global-component", {
            // 組件內容 抱一個div-單個根元素，包在app這個div中
            template: `<div><h3>{{ db }}</h3></div>`,
            // data必須是函數
            data(){
                // return中寫數據
                return {
                    db: 'hello',
               }
           }
       }
   );
    
    new Vue({
        el: '#app',
        // 根元素會替換div
        template: `<global-component></global-component>`
   })
</script>

全局組件vue

// 總結
Vue.component(
       // 第一個是組件名稱 第二個object
       "global-component", {
           // 組件內容 抱一個div-單個根元素，包在app這個div中
           template: `<div><h3>{{ db }}</h3></div>`,
           // data必須是函數
           data(){
               // return中寫數據
               return {
                   db: 'hello',
               },
   computed: {},
   watch: {},
   methods: {},
           }
       }
   );

new Vue({
       el: '#app',
       // 根元素會替換div
       template: `<global-component></global-component>`
   })

// data 必須是函數
// 沒有屬性

組件系統之組件的複用

<div id='app'>
 <global-component></global-component>
    <global-component></global-component>
    <global-component></global-component>
</div>
 
<script>
    // 註冊
    Vue.component(
        // 第一個是組件名稱 第二個object
        "global-component", {
            // 組件內容 抱一個div-單個根元素
            template: `<div><h3>{{ db }}</h3></div>`,
            // data必須是函數
            data(){
                // return中寫數據
                return {
                    db: 'hello',
               }
           }
       }
   );
    
    new Vue({
        el: '#app',
        
   })
</script>

組價系統之局部組件的註冊

<div id='app'>
 <app-header></app-header>
   
</div>
 
<script>
    let Header = {
      template: `<div><h3>{{ db }}</h3></div>`,
        data(){
            return {
                    db: 'hello',
               }
       },
        computed: {},
   };
    
    new Vue({
        el: '#app',
        template: `<app-header></app-header>`,
        components: {
            'app-header': Header
       }
   })
</script>

<div id='app'>
    <!--<App></App>-->   
</div>
 
<script>
    let Header = {
      template: `<div><h3>{{ db }}</h3></div>`,
        data(){
            return {
                    db: 'hello',
               }
       },
        computed: {},
        // ...
   };
    // 在入口組件中註冊寫的局部組件
    let App = {
        template: `
   <div>
      <app-header></app-header>
     </div>
  `,
        components: {
            'app-header': Header
       },
        // 組件的私有數據
        data(){},
   };
    // 根實例
    new Vue({
        el: '#app',
        // 做爲根被渲染
        template: `<App></App>`,
        components: {
            // App:App,
            App,
       }
   })
</script>

局部組件程序員

- 總結

建立組件
 建立局部組件，起始就是建立一個JavaScript object
   let Header = {
      template: `<div><h3>{{ db }}</h3></div>`,
       data(){
           return {
                   db: 'hello',
               }
       },
       computed: {},
   };
註冊組件
 
   new Vue({
       el: '#app',
       template: `<app-header></app-header>`,
       components: {
           'app-header': Header
       }
   })

組件能夠嵌套使用

Vue組件系統之父子組件的通訊

<div id='app'>
   
</div>
 
<script>
    // 子
    let Header = {
      template: `<div><h3>{{ db }}</h3><h3>{{ fData }}</h3><</div>`,
        data(){
            return {
                    db: 'hello',
               }
       },
        // 接收父親傳來的數據
        props:['fData'],
        computed: {},
        // ...
   };
    // 在入口組件中註冊寫的局部組件
    // 父
    let App = {
        template: `
   <div>
      <app-header v-bind:fData="fatherData"></app-header>
     </div>
  `,
        components: {
            'app-header': Header
       },
        // 組件的私有數據
        data(){
            return {fatherData: 0,}
       },
   };
    // 根實例
    new Vue({
        el: '#app',
        // 做爲根被渲染
        template: `<App></App>`,
        components: {
            // App:App,
            App,
       }
   })
</script>

Vue組件系統之子父組件的通訊

<div id='app'>
</dic>

<script>
    // 子
    let Header = {
      template: `<div> 
    <button @click='sonClick'>點擊改變字體大小</button>
     </div>`,
        methods: {
            sonClick: function(){
                // 兒子的的行爲傳給父親
                this.$emit("change-size", 0.1)
           }  
       },
        computed: {},
        // ...
   };
    // 父
    let App = {
        template: `
   <div>
      <span :style="{ fontSize: postFontSize + 'em' }">我是字體</span>
      <app-header v-on:change-size="fatherClick"></app-header>
     </div>
  `,
        components: {
            'app-header': Header
       },
        // 組件的私有數據
        data(){
            return {
                postFontSize: 1,
           }
       },
        methods: {
            // 本身定義的change-size事件，一直在監聽，等着兒子傳來的信息
            fatherClick: function(value){
                this.postFontSize += value;
           }
       }
   };
    // 根實例
    new Vue({
        el: '#app',
        // 做爲根被渲染
        template: `<App></App>`,
        components: {
            // App:App,
            App,
       }
   })
    
</script>

Vue組件系統之混入（mixin）

<div id='app'>
</dic>
  <my-header></my-header>
        <p></p>
        <my-app></my-app>
<script>
    let Header = {
      template: `<div> 
    <button @click='show('xxx')'>點擊顯示xxx來了</button>
    <button @click='hide('xxx')'>點擊顯示xxx去了</button>
     </div>`,
        methods: {
            show: function(name){
                console.log(name+'來了');
           },
            hide: function(name){
                console.log(name+'來了');
           },
       },
   };
    let App = {
        template: `
   <div>
      <button @mouseenter='show('000')'>點擊顯示000來了</button>
    <button @mouseleve='hide('000')'>點擊顯示000去了</button>
     </div>
  `,
        methods: {
            show: function(name){
                console.log(name+'來了');
           },
            hide: function(name){
                console.log(name+'來了');
           },
       }
   };
    // 根實例
    new Vue({
        el: '#app',
        components: {
            "my-header": Header,
            "my-app": App,
       }
   })
    
</script>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

<div id="app">
<my-header></my-header>
        <p></p>
        <my-app></my-app>
</div>

<script>

    let mixs = {
        methods: {
            show: function (name) {
                console.log(name + '來了')
            },
            hide : function (name) {
                console.log(name+ '去了')
            }
        }
    };
    let header = {
        template: `<div>
                    <button @click="show('xxx')">點擊顯示來了</button>
                    <button @click="hide('xxx')">點擊顯示來了</button>
                    </div>`,
        mixins: [mixs],
    };
    let app = {
        template: `
         <div>
             <button @mouseenter='show("000")'>點擊顯示000來了</button>
            <button @mouseleve='hide("000")'>點擊顯示000去了</button>
          </div>
      `,
        mixins: [mixs],
    };
    new  Vue({
        el: '#app',
        components: {
            "my-header": header,
            "my-app": app,
        }
    })

</script>

Vue組件系統之插槽<slot></slot>

- 內容分發
<style>
    .box {
        width: 50px;
        height: 50px;
        float: left;
   }
</style>
<div id='app'>
 <global-component>首頁</global-component>
    <global-component>免費</global-component>
    <global-component>收費</global-component>
</div>
 
<script>
    // 註冊全局組件
    Vue.component(
        "global-component", {
            template: `<div class="box"><slot></slot></div>`,
       }
   );
    
    new Vue({
        el: '#app',
   })
</script>

Vue組件系統之具名插槽

<style>
    .box {
        width: 50px;
        height: 50px;
        float: left;
   }
</style>
<div id='app'>
 <global-component>
    <div slot='home'>首頁</div>
        <div slot='free'>免費</div>
        <div slot='toll'>收費</div>
    </global-component>
</div>
 
<script>
    // 註冊全局組件
    Vue.component(
        "global-component", {
            template: `<div class="box">
     <slot name="home"></slot>
     <slot name="free"></slot>
     <slot name="toll"></slot>
      </div>`,
       }
   );
    
    new Vue({
        el: '#app',
   })
</script>