在原生html、js、jsp中使用vue+element封装组件_jsp 如何使用elemenui

作者：Cpp五条 | 2024-02-19 01:22:40

踩

jsp 如何使用elemenui

1、新建一个js文件，创建子组件，例：my-component.js


Vue.component('my-component', {
    template: `
    <div>测试</div>
    `,
    props: {
        isShow: {
          type: Boolean,
          default: false
        }
      },
      data() {
        return {
 
        }
      },
      watch: {
 
        },
        month() {
 
        }
      },
      mounted() {
 
      },
      methods: {
 
      }
})

2、新建html文件，创建父组件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 引入VUE文件 -->
    <script src="./js/vue.js"></script>
     <!-- 引入子组件js文件 -->
    <script src="./js/my-component.js"></script>
     <!-- 引入Element UI的CSS文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element UI的JS文件 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component :is-show="showDate"></my-component>
      </div>
</body>
<script>
  
    var app = new Vue({
      el: '#app',
      data() {
            return {
                showDate:ture
            }
        }
 
    });
  </script>
</html>

注意：命名必须保持一致，必须为驼峰或-，组件传值和其它写法都与vue语法一致。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/111781