vue中的组件实现

最新推荐文章于 2023-11-22 19:17:49 发布

「已注销」

最新推荐文章于 2023-11-22 19:17:49 发布

阅读量96

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/shuaihong/blog/1553682

版权

2019独角兽企业重金招聘Python工程师标准>>>

vue中的组件实现

什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

组件和模块化的区别？

组件和模块化，例如require.js都可以实现分离开发，但组件中包含页面template模板内容，和script脚本，style样式，是一个整体的功能，导入组件即可使用。但模块化只是对js的模块化管理。

组件同样分为全局组件和局部组件：

全局组件

全局组件同vm实例内一样，可以定义自定义指令、方法、和过滤器；
其中data需要是一个函数形式，将数据结果return返回；

示例：
<div id="app">
    <!-- 使用组件：组件名 -->
    <hello></hello>
 </div>

<script>
    // 创建全局组件
    // 第一个参数：表示组件名称
    // 第二个参数：表示组件的配置对象
    Vue.component('hello', {
      // 指定组件中展示的HTML内容
      // 注意：组件的模版中必须有唯一的根元素，否则，会报错
      // template: '<div><h1>这是 Hello 组件</h1><div>内容</div></div>',
      // ES6: 字符串模板 通过 反引号 使用
      template: `
        <div>
          <h1>这是 Hello 组件</h1>
          <div v-color>内容 --- {{ msg }} --- {{ num }}</div>
          <button @click="fn">组件触发事件</button>
        </div>
      `,

      // 注意：组件中的data需要是一个函数，函数中返回一个对象
      // 返回的对象才是组件的data
      data() {
        return {
          msg: '一场秋雨一场寒',
          num: 100
        }
      },

      methods: {
        fn() {
          this.num += 1
        }
      },

      // 用法与Vue实例中的对象配置用法相同
      directives: {
        color(el) {
          el.style.color = 'red'
        }
      },
      filters: {}

      // 使用 模板 来设置组件的内容（知道）
      // template: '#tpl'
    })
    
    var vm = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

局部组件

示例：
<script>
var vm = new Vue({
      el: '#app',
      data: {

      },

      // 创建局部组件
      components: {
        // hello 表示组件名称
        // 对象表示该组件的配置对象
        hello: {
          template: `
            <h1>局部组件</h1>
          `,
          // 返回的对象才是组件的data
          data(){
            
          },
          methods:{
            
          },
          filters:{
            
          }
        }
      }
    })
</script>

使用extend方法创建组件

示例：
<body>
  <div id="app">
    <!-- 使用组件 -->
    <hello></hello>
  </div>

  <script src="./vue.js"></script>
  <script>
    // 通过 Vue.extend() 方法创建一个基础构造器（Home 类似于 Vue构造函数）
    var Home = Vue.extend({
      template: `
        <h1>通过 extend 方法创建 --- {{ msg }}</h1>
      `,
      data() {
        return {
          msg: '数据'
        }
      }
    })
    
    // Home 的用法与 Vue构造函数的用法相同
    // 可以直接调用 $mount() 方法挂载到页面中,与下面Vue.component('hello', Home)作用一样。
    // new Home().$mount("App")
    
    //创建全局组件，参数1：组件名，参数2：extend()创建的基础构造器
    Vue.component('hello', Home)
    
    var vm = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>
</body>

转载于:https://my.oschina.net/shuaihong/blog/1553682