美文网首页
组件几个注意点

组件几个注意点

作者: tutututudou | 来源:发表于2022-07-14 11:53 被阅读0次

    extend省略

     // 第一步:创建good组件
        const good = Vue.extend({
          template:`<div>
            <h1>good</h1>
          </div>`,
        })
        // 简写模式: Vue.extend 可以写成一个对象,省略掉extend
        //   // 第一步:创建good组件
        //   const good = {
        //   template:`<div>
        //     <h1>good</h1>
        //   </div>`,
        // }
    

    组件name配置项是开发者工具显示的结果

      <div id="root">
        <!-- 组件名 -->
        <x></x>
        <!-- 可以复用 -->
        <x></x>
        <br>
        <student></student>
        <good></good>
      </div>
      <script>
        //第一步:创建shool组件
        const shool = Vue.extend({
          // el:'#root',// 组件定义时,不用写el这个配置,因为最后它都被一个vm管理,由vm决定服务哪个容器
          template:`<div>
          <h1>名称:{{shoolName}}</h1>
          <h1>地址:{{addr}}</h1>
        </div>`,//一定只有一个根元素包裹,这是组件的HTML结构,用template配置
          data(){ //data有对象式和函数式,组件式必须要用函数式,不然报错
            return { //函数式是为了可以复用,每次都返回一全新的对象,被修改也不会影响到复用的对象
             shoolName:'小学',
             addr:'上海'
            }
          }
        })
        // 第一步:创建student组件
        const student = Vue.extend({
          name:'hhhhhhhhhhhh',//这个名字决定在开发者工具显示的名字
          template:`<div>
          <h1>姓名:{{studentName}}</h1>
          <h1 @click="年龄加1">年龄:{{age}}</h1>
          </div>`,
          data(){
            return {
              studentName:'高高',
              age:17
            }
          }
        })
        // 第一步:创建good组件
        const good = Vue.extend({
          template:`<div>
            <h1>good</h1>
          </div>`,
        })
        // 简写模式: Vue.extend 可以写成一个对象,省略掉extend
        //   // 第一步:创建good组件
        //   const good = {
        //   template:`<div>
        //     <h1>good</h1>
        //   </div>`,
        // }
        //全局配置组件
        Vue.component('good',good)
        new Vue({
          el:'#root',//组件要服务的容器
          //局部定义组件
          components:{//一个键值的方式表示
            x:shool,//shool表示用的是哪个组件,但是在上面的HTML用的是x这个键名,键名不能用大小,除非用脚手架
           student//如果键名一致就用简写模式
          }
        })
      </script>
    

    相关文章

      网友评论

          本文标题:组件几个注意点

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