首页 > 其他分享> 文章详细

vue-组件0.1

2022-01-12 21:32:55 阅读：138 来源： 互联网

标签：vue extend 0.1 var msg Vue template 组件

组件

封装可重用一样
为了项目维护来拆分页面

组件的使用步骤

创造组建的构造器
注册组件
使用组件

组件分类

全局组件

Vue.component("my-extend",{
            template:`  
          <div>
                <div>我是组件</div>
                <div>{{msg}}</div>
            </div>`,
            data(){
              return {
                  msg:'这是msg'
              }
          }
        })

局部组件

var myextend = Vue.extend({
          template:`  
          <div>
                <div>我是组件</div>
                <div>{{msg}}</div>
            </div>         `,  //外面用一个div包裹起来，不然可能会报错
          data(){
              return {
                  msg:'这是msg'
              }
          }
      })
      var vm = new Vue({
          el:"#root",
          data:{
              
          },
          components:{
              "my-extend":myextend
          }
      })

构造器方法（这个不常用，pass）

注意

组件里不能用大写字母命名
当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。
组件必须挂载在某个Vue实例下，否则它不会生效

使用构造器

 var myCpn = Vue.extend({
            template: `
             <div>
                <h1>这是用构造器写的组件</h1>
            </div>
            `
        })

语法糖

Vue.component('myYft',{
            template: `
             <div>
                <h1>这是用语法糖写的组件</h1>
            </div>
            `
        })

创建组件对象

var myCom = {
            template: `
             <div>
                <h1>这是用创建组件对象写的组件</h1>
            </div>
            `
        }

全局注册
```
  Vue.component('my-cpn',myCpn)
```

局部注册

  new Vue({
            el: '#root',
            components: {
                "my-com":myCom
            }
        })

template

例子

<template id="sons">
        <div>
            <p>{{msg}}</p>
            <button @click="change">加</button>
        </div>
    </template>

    <script>
        var son ={
            template:"#sons",
            data(){
                return {
                    msg:0
                }
            }}
            ...
    </script>

组件传值

标签：vue,extend,0.1,var,msg,Vue,template,组件
来源： https://blog.csdn.net/weixin_51197518/article/details/122462670

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-组件0.1

组件