vue 组件化在 html 文件中的应用

由于开发过程中 vue 的组件化在 vue cli 比较常用，在 html 文件中使用较少，最近刚好有个需求有用到，记录新知。

组件注册分为全局注册与局部注册，下面提到的主要是局部注册利用模版 id 的一种使用方法，全局注册详见 vue 官网 组件注册 — Vue.js (vuejs.org)。

 

vue 实例上声明组件的 template 属性值是<template>模板的' #id'

           

将子组件的具体内容单独写入<template>中，放到<body>元素之后，<script>元素之前

 

 

 代码案例：

<body>
    <div id="main">
         <form-item-component
            :form-item-list="formItemList"
            :model="ruleForm.model"
            @handle-change="handleChange"
        >          
        </form-item-component>
    </div>
</body>
<template id="formItemComponent">
    <div>
        <h2>{{a}}</h2>
    </div>
</template> 
<script src="./vue/vue.js"></script>
<script>

　　new Vue({
　　　　el: '#main',
　　　　data: {},
　　　　// 局部注册
　　　　components: {
　　　　　　"form-item-component": {
　　　　　　　　template: '#formItemComponent',
　　　　　　　　data() {
                return {
                    a: '123'
                }
　　　　　　　　},
　　　　　　　　...
　　　　　　}
　　　　}
　　})

</script>

 

 

 依赖的 options 属性建议单独建 js 文件，使用扩展运算符依次声明

 

 

注意！

绑定的属性与事件不能使用驼峰命名，需要使用小写或用中线分开的名称

 

 slot 插槽同理

 

posted @ 2021-11-09 18:40  这拧巴的人生啊  阅读(614)  评论(0)    收藏  举报