之前的文章我们对 vue 的列表输出做了介绍, 本章我们来看一下 vue 的组件 component.
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <p>
- {{title}}
- </p>
- <table>
- <tbody>
- <row>
- </row>
- <row>
- </row>
- </tbody>
- </table>
- </div>
- <script>
- Vue.component("row", {
- data() {
- return {
- number: 0
- }
- },
- template: ` < tr > <td > {
- {
- this.number
- }
- } < /td></tr > `
- });
- var App = new Vue({
- el: '#app',
- data: {
- title: "hello world"
- }
- })
- </script>
- </body>
- </HTML>
在上面的代码中, 我们简单定义了一个 component 组件 row, 我们可以理解为该组件为整个 Vue 实例 App 的一个子组件, 在 row 组件中, 我们可以看到 data 内的数据不能再像根组件 App 那样直接定义直接定义为对象, 而是作为一个方法进行书写, 里面的数据需要 return 出来, 这样做是为了避免父组件与子组件, 子组件与子组件之间的 data 数据都写成 data:{ } 这样的类型数据时造成冲突.
我们将 HTML 代码写在一个 template 模板当中, 其中的 ` ` 为 ES6 里的模板字符转, 在这儿不做详细解释了. 里面的数据还是按照 {{ }} 插值表达式书写.
这样我们就可以在 Vue 的实例 id="app" 所控制范围内直接将 component 的名称 row 按照标签的方式书写. 结果如下:
内容可以在页面上显示, 但是令人遗憾的是当我们在控制台检查标签的时候发现我们定义的 <tr><td></td></tr> 并没有插入 body 内, 这是由于在 HTML 内,<tbody> 标签不识别 <row> 标签, 我们可以通过下面的方式解决:
- <row>
- </row>
- <tr is="row">
- </tr>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <p>
- {{title}}
- </p>
- <table>
- <tbody>
- <!-- <row></row>-->
- <!-- <row></row>-->
- <tr is="row">
- </tr>
- <tr is="row">
- </tr>
- </tbody>
- </table>
- </div>
- <script>
- Vue.component("row", {
- data() {
- return {
- number: 0
- }
- },
- template: ` < tr > <td > {
- {
- this.number
- }
- } < /td></tr > `
- });
- var App = new Vue({
- el: '#app',
- data: {
- title: "hello world"
- }
- })
- </script>
- </body>
- </HTML>
<tbody> 能识别 <tr> 标签, 所以我们将 row 标签改为 <tr is="row"></tr>, 这样的意思是以 <tr> 标签显示, 但是里面的内容时 component 为 row 的内容, 这样就能正确显示, 结果如下:
当我们在像 ul ol select 这些标签内写 component 组件时我们可以通过 is 的方法来将内容放到对应的标签内.
以上就是本篇的内容, 在接下来的文章里我们将对 component 组件进行详细的介绍.
来源: https://www.cnblogs.com/weijiutao/p/10677356.html