美文网首页
如何在Vue中自定义自己的组件

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

作者: 木羽木羽女口生 | 来源:发表于2020-12-26 01:22 被阅读0次

组件的使用分成三个步骤

  • 创建组件的构造器
  • 注册组件
  • 使用组件
<!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>

相关文章

网友评论

      本文标题:如何在Vue中自定义自己的组件

      本文链接:https://www.haomeiwen.com/subject/fvzvnktx.html