vue学习之四组件系统

Posted wangshuyang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue学习之四组件系统相关的知识,希望对你有一定的参考价值。

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 接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。仅有的例外是像 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学习之四组件系统的主要内容,如果未能解决你的问题,请参考以下文章

前端学习之Vue项目搭建

Vue学习之组件小结

Vue.js学习之组件

vue.js学习之组件数据流详解

Vue.js 基础学习之组件

Vue.js 基础学习之混合mixins