Vue 컴포넌트에서 주의해야 할 점은 무엇인가요?-프런트엔드 Q&A-php.cn

Vue 컴포넌트에서 주의해야 할 점은 무엇인가요?

青灯夜游

풀어 주다： 2021-12-23 18:33:27

원래의

2309명이 탐색했습니다.

vue 구성 요소를 사용할 때 주의할 사항: 1. 구성 요소의 템플릿에는 루트 노드가 하나만 있어야 합니다. 2. 구성 요소의 데이터 옵션은 함수여야 하며, 함수 본문은 객체를 반환합니다. 전달된 값은 상위 구성 요소를 직접 수정할 수 없습니다. 그렇지 않으면 경고가 표시됩니다.

Vue 컴포넌트에서 주의해야 할 점은 무엇인가요?

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue 컴포넌트화에 대한 참고사항

컴포넌트는 자체 템플릿을 관리하는 특별한 Vue 인스턴스로 이해될 수 있습니다.
구성 요소의 템플릿에는 루트 노드가 하나만 있어야 합니다.
구성요소의 데이터 옵션은 함수여야 하며 함수 본문은 객체를 반환합니다.
하위 구성 요소는 상위 구성 요소가 전달한 값을 직접 수정할 수 없습니다.

부모 컴포넌트는 속성의 형태를 통해 마음대로 자식 컴포넌트에 값을 전달할 수 있지만, 자식 컴포넌트는 부모 컴포넌트의 데이터를 수정할 수 없습니다. 그렇지 않으면 전달된 값을 직접 수정하지 말라는 경고가 표시됩니다. 상위 구성 요소.

구성 요소는 서로 독립적입니다. 일부 옵션 리소스 데이터, 메서드, 계산 등을 구성할 수 있습니다.

생각: 구성 요소는 스스로 관리하며 다른 구성 요소에 영향을 주지 않습니다.

컴포넌트 예시

<!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>

로그인 후 복사

[관련 추천: "vue.js tutorial"]

위 내용은 Vue 컴포넌트에서 주의해야 할 점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!