Vuejs组件的创建使用十一

最新推荐文章于 2023-11-25 13:27:22 发布

米白蓝

最新推荐文章于 2023-11-25 13:27:22 发布

阅读量639

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50563868/article/details/124269629

版权

Vuejs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<body>
  <div id="root">
    <my-school></my-school>
    <msg></msg>
    <hr>
    <student></student>
  </div>
  <div id="root2">
    <hr>
    <msg></msg>
  </div>
  <script>
    const student = Vue.extend({
      template: `
      <div>
        <h2>学生名：{{studentName}}</h2>
        <h2>学生地址：{{studentAddress}}</h2>
      </div>`,
      data() {
        return {
          studentName: '天蓬元帅',
          studentAddress: '高老庄'
        }
      }
    })
    const msg = Vue.extend({
      template: `
      <div>
        <h2>你好，{{msg}}</h2>
        </div>
      `,
      data() {
        return {
          msg: '信息'
        }
      }
    })
    const school = Vue.extend({
      name: 'schoolSchool',
      template: `
      <div>
        <h2>学校名：{{schoolName}}</h2>
        <h2>学校地址：{{schoolAddress}}</h2>
        <button @click="showName">点击获取名</button>
        <student></student>
      </div>`,
      data() {
        return {
          schoolName: '天庭学院',
          schoolAddress: '天堂',
        }
      },
      methods: {
        showName() {
          alert(this.schoolName)
        }
      },
      components: {
        student
      }
    })
    
    Vue.component('msg',msg)
    new Vue({
      el: '#root',
      components: {
        MySchool: school,
        student
      }
    })
    new Vue({
      el: '#root2',
      components: {
        school
      }
    })
  </script>
</body>

组件：私信局部功能代码和资源的集合；
模块化：应用中的js都是以模块编写的，这个应用就是模块化应用；
组件化：应用中的功能都是多个组件的方式来编写的，那这个应用就是一个组件化的应用；
非单文件组件：一个文件中包含有n个组件；单文件组件：一个文件中只包含一个组件；
创建组件：Vue.extend({}),里面的配置项和VUe实例的差不多，但是不能有el，因为最终所有的组件都要被一个vm管理，有vm决定组件服务于哪一个容器；
组件简写：const a = {配置项}，不写Vue.extend()；但底层依旧调用过了这个；
data：要写成函数的形式，因为对象形式，复用的时候是指向同一个地址的，就会造成，该一个地方，其它使用到的地方也会被该，函数形式，返回的值就是各自的全新的，不存在指向同一个地方；
注册组件：在Vue实例中使用components配置项以对象的形式将创建好的组件注册进去；
使用组件：在组件中使用template将需要使用的标签写好，然后将组件标签插入到需要引用的地方；
在组件中可以使用name配置项来决定开发者工具中呈现的名字；
全局组件：Vue.component(‘组件名’，组件对象)
组件标签：可以写成单标签<标签名/>；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs组件的创建使用十一

<body> <div id="root"> <my-school></my-school> <msg></msg> <hr> <student></student> </div> <div id="root2"> <hr> <msg></msg> </div>
复制链接

扫一扫