Vue 教程(十六)局部组件

Posted _否极泰来_

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 教程(十六)局部组件相关的知识,希望对你有一定的参考价值。

Vue 教程(十六)局部组件

Vue.extend

  1. Vue.extend():调用 Vue extend 创建的是一个组件构造器。通常在创建组件构造器时,传入 template 代表我们自定义组件的模板。

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>局部组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{message}}
      <book-component></book-component>
    </div>

    <script>
      const bookComponent = Vue.extend({
        template: `
                <div>
                    <h3>图书:TCP/IP 网络编程</h3>
                    <p>计算机网络入门书籍</p>
                </div>
            `,
      });
      const app = new Vue({
        el: "#app",
        data: {
          message: "局部组件",
        },
        components: {
          "book-component": bookComponent,
        },
      });
    </script>
  </body>
</html>

    – 以上为《Vue 教程(十六)局部组件》,如有不当之处请指出,我后续逐步完善更正,大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

以上是关于Vue 教程(十六)局部组件的主要内容,如果未能解决你的问题,请参考以下文章

Vue组件之全局组件与局部组件

vue教程3-03 vue组件,定义全局局部组件,配合模板,动态组件

Vue教程(四十六)keep-alive快速实现页面缓存

Vue教程(四十六)keep-alive快速实现页面缓存

Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs

Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs