码迷,mamicode.com
首页 > 其他好文 > 详细

Vue组件系统

时间:2018-11-08 18:33:00      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:pos   string   渲染   eth   ade   log   variable   ted   attribute   

目录:

  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‘>
</dic>
?
<script>
   let mixs = {
       methods:{
           show: function(name){
                   console.log(name+‘来了‘);
              },
           hide: function(name){
                   console.log(name+‘来了‘);
              },
      }
  }
   let Header = {
    template: `<div>
<button @click=‘show(‘xxx‘)‘>点击显示xxx来了</button>
<button @click=‘hide(‘xxx‘)‘>点击显示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: {
           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>

 

Vue组件系统

标签:pos   string   渲染   eth   ade   log   variable   ted   attribute   

原文地址:https://www.cnblogs.com/xiao-xue-di/p/9930068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!