Vue组件系统

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_30398227

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量176

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiao-xue-di/p/9930068.html

版权

　　Vue组件系统之全局组件的注册

　　Vue组件系统之组件的复用

　　Vue组价系统之局部组件的注册

　　Vue组件系统之父子组件的通信

　　Vue组件系统之子父组件的通信

　　Vue组件系统之混入（mixin）

　　Vue组件系统之插槽<slot></slot>

　　Vue组件系统之具名插槽

　　做专业的程序员看专业的官方文档　　

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

转载于:https://www.cnblogs.com/xiao-xue-di/p/9930068.html

weixin_30398227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件系统

目录：　　Vue组件系统之全局组件的注册　　Vue组件系统之组件的复用　　Vue组价系统之局部组件的注册　　Vue组件系统之父子组件的通信　　Vue组件系统之子父组件的通信　　Vue组件系统之混入（mixin）　　Vue组件系统之插槽<slot></slot>　　Vue组件系统之具名插槽　　做专业的程序员看专业的官方文档　　V...
复制链接

扫一扫