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

最新推荐文章于 2024-04-26 15:48:30 发布

更好的自己520

最新推荐文章于 2024-04-26 15:48:30 发布

阅读量1.1k

点赞数

分类专栏： vuejs框架学习文章标签：扩展

vuejs框架学习专栏收录该内容

71 篇文章 2 订阅

订阅专栏

组件可以扩展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

更好的自己520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件之全局局部注册父组件子组件

组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素，组件系统提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用。全局注册&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;!-- 3. #app...
复制链接

扫一扫

专栏目录