组件之全局局部注册父组件子组件

转载 2018年04月17日 10:18:46

组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素,组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用。

全局注册

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
            <the-component></the-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>

        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div> my first component!</div>'
        })

        // 2.注册组件,并指定组件的标签,组件的HTML标签为<the-component> 
        Vue.component('the-component', myComponent)

        new Vue({
            el: '#app'
        });

    </script>
</html>

分析:
1:Vue.extend()是Vue构造器的扩展,调用Vue.extend()构建的是一个组件构造器,而不是一个具体的组件实例,它里面的选项对象的template属性用于定义组件要渲染的HTML。

2:Vue.component()注册组件时,需要提供2个参数,第一个参数是组件的标签,第二个是组件构造器,它调用了组件构造器myCononent,创建一个组件实例

3:组件应该挂载在某个Vue实例下

new Vue({
  el: '#app'
})

这段代码必须要有,表示挂载在#app元素上,否则不会生效。

局部注册

<script>

        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div> my first2 component!</div>'
        })

        new Vue({
            el: '#app',
            components: {
                // 2. 将myComponent组件注册到Vue实例下
                'the-component' : myComponent
            }
        });

    </script>

父组件和子组件:可以在组件中定义并使用其他组件,构造父子组件关系

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- 子组件模板 -->
    <template id="child-template">
      <input v-model="msg">
      <button v-on:click="notify">Dispatch Event</button>
    </template>

    <!-- 父组件模板 -->
    <div id="events-example">
      <p>Messages: {{ messages | json }}</p>
      <child></child>
    </div>
  </body>
  <script src="http://cdn.bootcss.com/vue/1.0.0-csp/vue.js"></script>
  <script>
  // 注册子组件
  // 将当前消息派发出去
  Vue.component('child', {
    template: '#child-template',
    data: function () {
      return { msg: 'hello' }
    },
    methods: {
      notify: function () {
        if (this.msg.trim()) {
          this.$dispatch('child-msg', this.msg)
          this.msg = ''
        }
      }
    }
  })

  // 初始化父组件
  // 将收到消息时将事件推入一个数组
  var parent = new Vue({
    el: '#events-example',
    data: {
      messages: []
    },
    // 在创建实例时 `events` 选项简单地调用 `$on`
    events: {
      'child-msg': function (msg) {
        // 事件回调内的 `this` 自动绑定到注册它的实例上
        this.messages.push(msg)
      }
    }
  })

  </script>
</html>

参考博客:https://www.cnblogs.com/wj204/p/5923045.html

vue 全局/局部组件

Vue.component('my-compoent',{ template:'测试1' }) new Vue({ el:'#example1' }) ...
  • u011301203
  • u011301203
  • 2017-03-23 16:34:20
  • 4082

对于vue中的全局组件和局部组件的一点小见解

一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,在今天的学习中又加深了一点点的理解,为了方便以后的记忆,在这里写一下,所谓全局变量是针对vue实例下说的,即所有的vue实际都可以运用到...
  • h_025
  • h_025
  • 2017-02-07 12:53:22
  • 1939

Vue.js的组件(一)全局组件和局部组件

刚开始学习Vue.js,记录下心得。 所谓组件,在我看来,就相当于新建一个属于自己的标签。但是这个标签的功能很强大,可以有很多特殊的功能。 组件可以全局声明:/*js*/ Vue.componen...
  • oak160
  • oak160
  • 2017-03-22 15:46:02
  • 1600

vue全局组件与局部组件的方法

vue全局/局部注册,以及一些混淆的组件
  • evendetail
  • evendetail
  • 2017-11-24 11:21:47
  • 803

vue父子组件的嵌套

组件的注册:先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组...
  • qq_24849765
  • qq_24849765
  • 2016-07-19 00:33:19
  • 14702

Vue.js的全局/局部组件填坑记

玩Vue也有一段日子了,最近陷在组件坑里差点出不来,还好有SegmentFault高人指点,特将细节分享出来一起学习提高。 起因:最早一直用的是头文件引入Vue,即,这样做的缺点是每次都需要...
  • qwezxc24680
  • qwezxc24680
  • 2017-06-21 16:08:18
  • 2235

vue的props实现父组件变化子组件一起变化

类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时,也会传导给子组件: 使用 v-bin...
  • qq_24147051
  • qq_24147051
  • 2016-09-02 15:13:13
  • 17115

Vue.js组件—父组件与子组件之间的数据联系

Vue组件—父组件与子组件之间的数据联系
  • u014304657
  • u014304657
  • 2017-07-27 17:14:21
  • 1830

vue子组件获取父组件的内容(props属性)

props属性组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 想要引用父组件需要://子组件将父组件的数据msg绑定到...
  • Queen_zdd
  • Queen_zdd
  • 2017-10-28 10:24:20
  • 1538

vue-子组件向父组件传值

子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 Do you like me? {{childWords}} methods: { ...
  • yu88288356
  • yu88288356
  • 2017-02-06 17:22:38
  • 28590
收藏助手
不良信息举报
您举报文章:组件之全局局部注册父组件子组件
举报原因:
原因补充:

(最多只允许输入30个字)