Vue的基础组件

最新推荐文章于 2023-03-17 22:53:00 发布

“落幕”

最新推荐文章于 2023-03-17 22:53:00 发布

阅读量544

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_15034541/article/details/114988823

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.4 Vue基础组件

1.4.1组件注册

语法： Vue.component("自定义组件的名称", {
这个括号内可以写实例里面的内容，例如data（值必须是一个函数）、methods、computed、watch等但是不可以写el。

1、props可以定义一些数据、接收一些数据他的值可以是字符串、数字、对象、数组等，也可以是数据类型。

2、template：的值是我们自定义组件所需要的代替的html代码。
}）

1.4.2对于props的命名问题：

在props命名的时候可以使用驼峰的方式进行命名但是在html代码中使用组件传值的时候需要将驼峰方式改成-连接方式来书写，因为vue.component的属性命名在解析的时候会将大写的代码自己转换为小写。

注意js中不支持-连接可以写成_连接

1.4.3组件基础中$emit()的用法

$emit('自定义事件名称'，传值)
1、子组件可以使用 props 接收父组件的数据
2、子组件可以使用 $emit 触发父组件的自定义事件。

案例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V69Yzf6B-1616067986242)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210305103347295.png)]

小知识：

v-bind:可以简写为：

v-on：click可以简写为@click

1.4.4局部组件

局部组件的语法：
第一步：创建组件，
let 组件名称自己命名={
template=`<p>111</p>`
这个花括号中可以写所有的周期函数例如：、data（必须是一个函数）、components（一般嵌套使用时才会卸载局部的创建组件中）、watch、props、methods、computed等
}
第二部：注册，
通过components：{}再实例中以键值对的方式注册一个或多个组件，只有注册后才可以使用，
最后使用的dom组件以components中的属性名为标签名，属性值是我们创建组件时的命名。

注意：

components属性命名时不可以写驼峰html不区分大小写html会自己将含有大写字母的组件名称转换为全小写的组件名称这样就会导致浏览器无法识别我们的组件；命名时简易使用-来代替驼峰的连接方式。

<body>
  <div id="app">
    <list-item></list-item>
  </div>
  <div id="vm">
    <aa></aa>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    /**
     * 这里只是创建一个局部组件，并不能直接在 vue 实例中使用
     */
    let listItem = {
      template: `<li><a href="#">home</a></li>`,
      data: function () {
        return {}
      },
      methods: {},
      computed: {},
      watch: {},
      props: {}
    }
    let app = new Vue({
      el: '#app',
      data: {},
      components: {
        'list-item': listItem
      }
    })

    let vm = new Vue({
      el: '#vm',
      components: {
        'aa': listItem
      }
    })
  </script>
</body>

局部组件与全局组件不同，全局组件在实例外直接进行注册不需要进行创建，而局部组件需要先创建再注册（想在那个实例中用就在那个实例中注册。）

1.4.5组件嵌套

1.4.5.1全局组件嵌套

实现组件嵌套组件的结构:
全局组件嵌套:
<body>
    <div id="app">
      <el-list :data="posts"></el-list>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 创建列表组件
      Vue.component("el-list", {
        template: `<nav>
                  <ul>
                    <el-list-item></el-list-item>  
                  </ul>
                </nav>`,
      });
      // 创建列表项组件
      Vue.component("el-list-item", {
        template: `<li><a href="#">12313</a></li>`,
      });
      let app = new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>

结论：定义两个组件将被嵌套的组件以dom结构的方式卸载嵌套组件的template的html结构中。

1.4.5.2局部组件嵌套+传递数据

局部组件嵌套与全局嵌套相同。

注意：要注意声明的顺序不可颠倒。

传值思路：在外层组件定义时定义一个变量在html结构中通过v-bind获取实例data中的数据，然后将内层的组件以组件dom的形式嵌套在内就可以使用这个组件变量接收来自实例的数据通过我们熟知的v-bind：的方法获取

<body>
  <div id="app">
    <el-list :data="posts"></el-list>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 创建列表项组件
    let esListItem = {
      props: ['title'],
      template: `<li><a href="#">{{title}}</a></li>`
    }
    // 创建列表组件
    let elList = {
      props: ['data'],
      template: `<nav>
                  <ul>
                    <el-list-item v-for="item in data" :key="item.id" :title="item.title"></el-list-item>  
                  </ul>
                </nav>`,
      components: {
        'el-list-item': esListItem
      }
    }

    let app = new Vue({
      el: '#app',
      data: {
        posts: [
          { id: 1, title: '今天好热' },
          { id: 2, title: '明天更热' },
          { id: 3, title: '因为有空调' },
        ]
      },
      components: {
        'el-list': elList,
      }
    })
  </script>
</body>

“落幕”

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的基础组件

1.4 Vue基础组件1.4.1组件注册语法： Vue.component("自定义组件的名称", {这个括号内可以写实例里面的内容，例如data（值必须是一个函数）、methods、computed、watch等但是不可以写el。1、props可以定义一些数据、接收一些数据他的值可以是字符串、数字、对象、数组等，也可以是数据类型。2、template：的值是我们自定义组件所需要的代替的html代码。}）1.4.2对于props的命名问题：在props命名的时候可以使用驼峰的方式进行
复制链接

扫一扫