码迷，mamicode.com
首页 > 其他好文 > 详细

vue学习之四组件系统

时间：2018-10-30 17:08:43      阅读：135      评论：0      收藏：0      [点我收藏+]

标签：隐藏   mode   turn   rda   har   js组件   onclick   混入   html   

vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。

一、Vue.js组件系统

每一个新技术的诞生，都是为了解决特定的问题。

组件的出现就是为了解决页面布局等等一些列的问题。

vue中的组件分为两种，全局组件和局部组件。

二、全局组件与局部组件

2.1全局组件

通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。

 方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>

    <div id="app" >
        <!--使用方式一-->
        <global-component></global-component>
    </div>

    <script>
        // vue当中的组件分为全局组件和局部组件
        // vue也是一个vue实例，创建时接收的参数与通过new创建的根实例类似，除了el这个属性名外
        // 第一步注册一个组件
        Vue.component("global-component", {
            template: `<h1>Hello Vue</h1>`
        });

        new Vue({
            el: "#app",
            data: {
                greeting: "Hello Vue",
            },
        })
    </script>
</body>
</html>

　　方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>

    <div id="app" >

    </div>

    <script>
        // vue当中的组件分为全局组件和局部组件
        // vue也是一个vue实例，创建时接收的参数与通过new创建的根实例类似，除了el这个属性名外
        // 第一步注册一个组件
        Vue.component("global-component", {
            template: `<h1>Hello Vue</h1>`
        });

        new Vue({
            el: "#app",
            // 第二种使用方式
            template: `<global-component></global-component>`,
            data: {
                greeting: "Hello Vue",
            },
        })
    </script>
</body>
</html>

2.2局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>

    <div id="app" >
        <my-header></my-header>
    </div>

    <script>
        // 第一步，声明一个JavaScript对象，属性名和vue实例一样，除el
        let Header = {
            template: `<h1>{{ greeting }}</h1>`,
            data(){
                return {
                    greeting: "Hello Vue",
                }
            },
            methods: {},
            computed: {}
        };

        new Vue({
            el: "#app",
            // 第二种使用方式
            data: {

            },
            // 第二步，注册
            components: {
                ‘my-header‘: Header
            }
        })
    </script>
</body>
</html>

三、组件的参数

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。

 

3.1data

data必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>

    <div id="app" >
        <global-component></global-component>
        <global-component></global-component>
        <global-component></global-component>
        <global-component></global-component>
    </div>

    <script>
        // vue当中的组件分为全局组件和局部组件
        // vue也是一个vue实例，创建时接收的参数与通过new创建的根实例类似，除了el这个属性名外
        // 第一步注册一个组件
        // data必须是一个函数
        Vue.component("global-component", {
            template: `<h1>{{ greeting }}</h1>`,
            data () {
                return {
                    greeting: "Hello Vue"
                }
            }
        });

        new Vue({
            el: "#app",
            // 第二种使用方式
            data: {

            },
        })
    </script>
</body>
</html>

　　3.2在局部组件中使用自组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  </style>
</head>
<body>
  <div id="component-demo">
  </div>
  <script>
    // 定义一个局部组件，其实就是一个变量，它是一个object类型
    // 属性与全局组件是一样的

    let Fcontent = {
      template: `
        <div>
          <span>这是头条</span>

        </div>
      `
    };

    let Header = {
      template: `
        <div v-bind:class=‘{box: isBox}‘>
          <button @click="count++">{{ count }}</button>
          <first-content></first-content>
        </div>
      `,
      data() {
        return {
          count: 0,
          isBox: true
        }
      },
      components: {
        ‘first-content‘: Fcontent
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二种使用方式，不会将div渲染进DOM，以template为根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根实例当中使用它
      components: {
        ‘my-header‘: Header
      }
    });
  </script>
</body>
</html>

　　3.3父子组件的通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <style>
        body {
            margin: 0;
        }
        .header {
            width: 100%;
            height: 50px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

    <div id="app">

    </div>

    <script>
        let Header = {
            template: `
                <div class="header">
                    这是子组件
                    <h1>{{ fatherdata }}</h1>
                </div>
            `,
            props: [‘fatherdata‘]
        };

        let App = {
            template: `
                <div id="app">
                    <my-header :fatherdata="role"></my-header>
                </div>
            `,
            components: {
                // 第二步，注册到父组件中
                ‘my-header‘: Header
            },
            data() {
                return {
                    role: ‘我是你爸爸‘
                }
            }
        };

        new Vue({
            el: "#app",
            data: {
                count: 0,
            },
            components: {
                App
            },
            template: `<app></app>`
        })
    </script>
</body>
</html>

　　3.4子父组件的通信

父组件在mounted的时候，监听一个自定义事件。

给子组件绑定一个click事件之后，通过内建的方法$emit在父组件上触发一个事件，这个时间就是父组件监听的自定义事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <style>
        body {
            margin: 0;
        }
        .header {
            width: 100%;
            height: 50px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

    <div id="app">

    </div>

    <script>
        let Header = {
            template: `
                <div class="header">
                    这是子组件
                    <button @click="sonClick">点击改变字体</button>
                </div>
            `,
            methods: {
                sonClick: function () {
                    this.$emit(‘change-size‘, 0.1);
                }
            }
        };

        let App = {
            template: `
                <div id="app">
                    <span :style="{ fontSize: articleFontSize + ‘em‘ }">Hello Vue</span>
                    <my-header @change-size="fatherClick"></my-header>
                </div>
            `,
            components: {
                // 第二步，注册到父组件中
                ‘my-header‘: Header
            },
            data(){
                return {
                    articleFontSize: 1
                }
            },
            methods: {
                fatherClick: function (value) {
                    console.log(value);
                    this.articleFontSize += value;
                }
            }
        };

        new Vue({
            el: "#app",
            data: {
                count: 0,
            },
            components: {
                App
            },
            template: `<app></app>`
        })
    </script>
</body>
</html>

　　3.5混入

混入可以提高代码的重用性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <style>
        body {
            margin: 0;
        }
        .header {
            width: 100%;
            height: 50px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

    <div id="app">

    </div>

    <script>

        let mixs = {
            methods: {
                show: function (name) {
                    console.log(name);
                },
                hide: function (name) {
                    console.log(name);
                }
            },
        };

        let doAlex = {
            template: `
                <div>
                    <button v-on:click="show(name)">点击显示{{ name }}</button>
                    <button v-on:click="hide(name)">点击隐藏{{ name }}</button>
                </div>
            `,
            data() {
                return {
                    name: "alex",
                }
            },
            mixins: [mixs],
        };

        let doPeiqi = {
            template: `
                <div>
                    <button v-on:click="show(name)">点击显示{{ name }}</button>
                    <button v-on:click="hide(name)">点击隐藏{{ name }}</button>
                </div>
            `,
            data() {
                return {
                    name: "peiqi",
                }
            },
            mixins: [mixs],
        };

        let App = {
            template: `
                <div>
                    <my-alex></my-alex>
                    <my-peiqi></my-peiqi>
               </div>
            `,
            components: {
                ‘my-alex‘: doAlex,
                ‘my-peiqi‘: doPeiqi
            }
        };

        new Vue({
            el: "#app",
            data: {
                count: 0,
            },
            components: {
                App
            },
            template: `<App>`
        })
    </script>
</body>
</html>

　　3.6插槽

有时候我们需要向组件传递一些数据，这时候可以使用插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <style>
        body {
            margin: 0;
        }
        .header {
            float: left;
            height: 50px;
            margin-left: 5px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

    <div id="app">
        <com-content>登录</com-content>
        <com-content>注册</com-content>
        <com-content>最热</com-content>
        <com-content>段子</com-content>
        <com-content>42区</com-content>
        <com-content>图片</com-content>
    </div>

    <script>
        Vue.component(‘com-content‘, {
            template: `
                <div class="header">
                    <slot></slot>
                </div>
            `
        });

        new Vue({
            el: "#app",
            data: {

            },
        })
    </script>
</body>
</html>

　　3.7具名插槽

操作使用了组件的复用，如果我们在同一个组件内写入不同的页面呢？此时，我们需要多个插槽，并且给不同的内容命名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav-link {
            width: 100px;
            height: 100px;
            background-color: #2aabd2;
            float: left;
            margin-left: 5px;
            text-align: center;
            line-height: 100px;
        }
    </style>
    <script src="../statics/vue.js"></script>
</head>
<body>
    <div id="app01">
        <base-layout>
            <template slot="header">
                <h1>这是标题栏</h1>
            </template>
            <template>
                <h2>这是内容</h2>
            </template>
            <template slot="footer">
                <h3>这是页脚</h3>
            </template>
        </base-layout>
    </div>

    <script>
        let baseLayout = {
            template: `
                <div class="container">
                  <header>
                      <slot name="header"></slot>
                  </header>
                  <main><slot></slot></main>
                  <footer>
                      <slot name="footer"></slot>
                  </footer>
                </div>
            `
        };

        new Vue({
            el: "#app01",
            components: {
                "base-layout": baseLayout
            }

        })
    </script>

</body>
</html>

　　我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。

　　3.8非关系组件之间的通信

非父子组件之间可以通过一个中间Vue实例来进行通信。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>
    <div id="app">
            <com-main></com-main>
    </div>

    <script>

        let pizza = new Vue();

        let Alex = {
            template: `
                <div>
                    <button @click="alexClick">点击向沛齐道歉</button>
                </div>
            `,
            methods: {
                alexClick: function () {

                    pizza.$emit("alex_apo", "原谅我吧，请你大保健~~~");
                }
            },
        };

        let peiQi = {
            template: `
                <div v-show="isShow">原谅你了~~~</div>
            `,
            mounted () {
                pizza.$on("alex_apo", function (alexsay) {
                    if ( alexsay ) {
                        console.log("原谅你了~~~");
                    }
                });
            },
            data () {
                return {
                    isShow: false
                };
            }
        };

        let App = {
            template: `
                <div id="app">
                    <alex></alex>
                    <peiqi></peiqi>
                </div>
            `,
            components: {
                ‘alex‘: Alex,
                ‘peiqi‘: peiQi
            }
        };

        new Vue({
            el: "#app",
            template: ‘<app></app>‘,
            components: {
                ‘app‘: App,
            },
        })

    </script>

</body>
</html>

　　3.9在组件上使用v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

<input v-model="searchText">

等价于：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

当用在组件上时，v-model 则会这样：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了让它正常工作，这个组件内的 <input> 必须：

将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

Vue.component(‘custom-input‘, {
  props: [‘value‘],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit(‘input‘, $event.target.value)"
    >
  `
})

现在 v-model 就应该可以在这个组件上完美地工作起来了：

<custom-input v-model="searchText"></custom-input>

如下是在组件中使用v-model示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div id="app">
  </div>

  <script>
    let Model = {
      template: `
        <div>
            <input
              v-bind:value="value"
              v-on:input="$emit(‘input‘, $event.target.value)"
            />
            <h1>{{ value }}</h1>
      `,
      props: [‘value‘]
    };

    let App = {
      template: `
        <div>
            <custom-input v-model="searchText"></custom-input>
      `,
      components: {
        ‘custom-input‘: Model,
      },
      data(){
        return {
          searchText: "",
        }
      }
    };

    new Vue({
      el: "#app",
      template: `<App></App>`,
      components: {
        App,
      }
    })
  </script>
</body>
</html>

　　3.10使用组件的注意事项

注意事项一：单个根元素

当构建一个内容页面的组件时，我们的组件可能包含多个HTML标签。

<h1>Hello World</h1>
<h2>Hello Vue</h2>

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

<div>
  <h1>Hello World</h1>
  <h2>Hello Vue</h2>
</div>
注意事项二：解析特殊HTML元素

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
  <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串 (例如：template: ‘...‘)
单文件组件 (.vue)
<script type="text/x-template">

　　

vue学习之四组件系统

标签：隐藏   mode   turn   rda   har   js组件   onclick   混入   html   

原文地址：https://www.cnblogs.com/wangshuyang/p/9876017.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！