如何在Vue中自定义自己的组件

组件的使用分成三个步骤

  • 创建组件的构造器
  • 注册组件
  • 使用组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!-- 3. 在Dom中使用你的组件   -->
    <my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>

  // 1. 创建自定义组件
  const myCompoment = Vue.extend({
    template: `
      <div>
        <h2>组件标题</h2>
        <p>组件中的一个段落</p>
      </div>
    `
  });

  // 2.注册这个组件，并且给这个组件定义一个标签
  Vue.component('my-cpn',myCompoment)
  const app = new Vue({
    el: '#app',
    data: {}
  })
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容