Vue组件基础

最新推荐文章于 2024-09-06 14:35:24 发布

绿龙术士

最新推荐文章于 2024-09-06 14:35:24 发布

阅读量113

点赞数

分类专栏：前端技术文章标签： Vue

前端技术专栏收录该内容

26 篇文章 0 订阅

订阅专栏

组件系统是Vue的重要概念，它允许我们使用小型，独立的可复用组件构造大型应用。在Vue中，一个组件的本质是一个拥有预定义选项的一个Vue实例。

例如：
最简单的Demo，Basic.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        <base-userregister></base-userregister>
    </div>
    <script src="../../../Plugins/vue/dist/vue.js"></script>
    <script src="../../../Scripts/vue/Component/Basic.js"></script>
</body>
</html>

定义组件，生成Vue对象，Basic.js：

Vue.component("base-userregister",
    {
        data: function () {
            return {
                UserName: "111111",
                Password:"hello world"
            };
        },
        methods: {
            SubmitClick: function () {
                console.log("UserName:"+this.UserName);
            }
        },
        template: `<div>
                            <table>
                                <tr>
                                    <td><label>用户名：</label></td>
                                    <td><input type="text" v-model="UserName"/></td>
                                </tr>
                                <tr>
                                    <td><label>密码：</label></td>
                                    <td><input type="password" v-model="Password"/></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><input type="submit" value="提交" v-on:click='SubmitClick'></td>
                                </tr>
                            </table>
                        </div>`
});
new Vue({
    el: "#app",
});

这样就把用户名和密码做成了一个组件。

注意：与普通的Vue对象相比，组件的data选项是一个Func，这是为了让多个相同类型的组件不会互相影响

父框架向组件传递数据，我们先在组件中注册props选项，然后在把数据通过属性传递到组件中。

例如：

Basic.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        <base-bbspost title="中美贸易战" ></base-bbspost>
    </div>
    <script src="../../../Plugins/vue/dist/vue.js"></script>
    <script src="../../../Scripts/vue/Component/Basic.js"></script>
</body>
</html>

Basic.js

Vue.component("base-bbspost", {
    data: function () {
        return {};
    },
    props: {
        title: String,
        message: String
    },
    template: `<div>
                        <h2>{{title}}</h2>
                        <div>{{message}}</div>
                    </div>`
});
new Vue({
    el: "#app",
});

代码规范：props应该尽可能详细，至少需要指定其类型。它有两个好处：它们写明了组件的API所以很容易看懂组件的用法；在开发环境下，如果向组件提供格式不正确的prop，Vue会告警，以帮助你捕获潜在的错误来源。

反例：

// 这样做只有开发原型系统时可以接受
props: ['status']

好例子：

props: {
  status: String
}
// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

组件也可以通过注册一个事件供上级调用，并传值。我们可以通过$emit方法传入事件名称和参数

Basic.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        <div v-bind:style="{fontSize:fontSize + 'px'}">达达兔论坛</div>
        <base-changefont v-on:font-change="fontChange"></base-changefont>
    </div>
    <script src="../../../Plugins/vue/dist/vue.js"></script>
    <script src="../../../Scripts/vue/Component/Basic.js"></script>
</body>
</html>

Basic.js：

Vue.component("base-changefont", {
    data: function () {
        return {
            fontSize: [10, 12, 14, 16, 18, 20],
            font:10
        };
    },
    methods: {
        fontChange: function (event) {
            //调用父控件的方法
            this.$emit('font-change', this.font);
        }
    },
    template: `
        <div>
            <label>字体大小：</label>
            <select v-on:change="fontChange" v-model="font">
                <option v-for='item in fontSize'>{{item}}</option>
            </select>
            <label>px</label>
        </div>
    `
});

new Vue({
    el: "#app",
    data: {
        fontSize:10
    },
    methods: {
        fontChange: function (size) {
            this.fontSize = size;
        }
    }
});