美文网首页
vue非单组件

vue非单组件

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

非单文件组件

 <div id="root">
    <!-- 组件名 -->
    <x></x>
    <!-- 可以复用 -->
    <x></x>
    <br>
    <student></student>
  </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({
      template:`<div>
      <h1>姓名:{{studentName}}</h1>
      <h1 @click="年龄加1">年龄:{{age}}</h1>
      </div>`,
      data(){
        return {
          studentName:'高高',
          age:17
        }
      }
    })
    new Vue({
      el:'#root',//组件要服务的容器
      //局部定义组件
      components:{//一个键值的方式表示
        x:shool,//shool表示用的是哪个组件,但是在上面的HTML用的是x这个键名
       student//如果键名一致就用简写模式
      }
    })
  </script>
非单文件组件修改.PNG
  • 修改其中一个不影响其它组件,因为这是data是函数式,每次返回的值不一样

全局定义组件

全局注册组件.PNG
  • new Vue里面的components配置中没有配置good,用的是** Vue.component('good',good)**
  <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({
      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.component('good',good)//全局配置组件
    new Vue({
      el:'#root',//组件要服务的容器
      //局部定义组件
      components:{//一个键值的方式表示
        x:shool,//shool表示用的是哪个组件,但是在上面的HTML用的是x这个键名
       student//如果键名一致就用简写模式
      }
    })
  </script>

相关文章

网友评论

      本文标题:vue非单组件

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