What should we pay attention to in vue components?-Front-end Q&A-php.cn

What should we pay attention to in vue components?

青灯夜游

Release： 2021-12-23 18:33:27

Original

2300 people have browsed it

Things to note for vue components: 1. The template of the component must have and only one root node; 2. The data option of the component must be a function, and the function body returns an object; 3. Subcomponents cannot Directly modify the value passed by the parent component, otherwise there will be a warning.

What should we pay attention to in vue components?

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue componentization considerations

Components can be understood as special Vue instances that manage their own templates.
The template of the component must have one and only one root node.
The data option of the component must be a function, and the function body returns an object.
Subcomponent cannot directly modify the value passed by the parent component.

The parent component can pass values to the child component at will through the attributes, but the child component cannot modify the data of the parent component; otherwise there will be a warning not to directly modify the value passed by the parent component.

Components are independent of each other, and you can configure some of your own option resources data, methods, computed, etc.

Ideology: Components manage themselves and do not affect others.

Component examples

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局注册 - 王佳伟</title>
</head>

<body>


    <div id="app">
        <!-- 引用组件时必须使用横线分割符 -->
        <component-a></component-a>
        <component-a></component-a>
        <component-b></component-b>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        // 全局注册组件
        /***
         * 1.组件命名：驼峰、横线分隔符命名方式
         * 2.使用组件：使用组件时必须采用横线分隔符的方式进行引用
         * 
         * 组件可以理解为就是特殊的Vue实例，不需要手动的实例化而已，它用于管理自己的模板。
         */
        Vue.component(&#39;component-a&#39;, {
            // template选项，指定组件的模板代码
            template: &#39;<div><h1>头部组件  --  {{name}}</h1></div>&#39;,
            data: function () {  // 在组件中，data选项必须是一个函数
                return {
                    name: &#39;全局组件&#39;
                }
            }
        })

        // 定义局部组件对象
        const ComponentB = {
            template: &#39;<div>这是 {{name}} </div>&#39;,
            data() {
                return {
                    name: &#39;局部组件&#39;
                }
            },
        }
        new Vue({
            el: &#39;#app&#39;,
            components: {
                // key:value   ;  key为组件名，value是组件对象。
                &#39;component-b&#39;: ComponentB
            },
            data: {

            }
        })
    </script>

</body>

</html>

Copy after login

[Related recommendations: "vue.js tutorial"]

The above is the detailed content of What should we pay attention to in vue components?. For more information, please follow other related articles on the PHP Chinese website!