<div id="readability-page-1" class="page"><div>
<h2>nested component</h2>
<pre><code>&lt;template&gt;
    &lt;h2&gt;Page Title&lt;/h2&gt;
&lt;/template&gt;</code></pre>
<pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;PageTitle /&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
    import PageTitle from '../components/PageTitle'
    export default {
        components: [PageTitle]
    }
&lt;/script&gt;</code></pre>
<p>props </p>
<pre><code>&lt;template&gt;
    &lt;h2&gt;{{title}}&lt;/h2&gt;
&lt;/template&gt;
&lt;script&gt;
    export default {
        props: {
            title: {
                type: String,
                default: "페이지 제목입니다."
            }
        }
    }
&lt;/script&gt;

&lt;template&gt;
    &lt;div&gt;
        &lt;PageTitle title="Nested Component" /&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import PageTitle from '../components/PageTitle'
export default {
    components: { PageTitle }
}
&lt;/script&gt;</code></pre>
<p>dynamic props </p>
<p><code>v-bind</code>를 이용하여 props 전달이 가능하다.</p>
<pre><code>&lt;page-title :title="title"</code></pre>
<h3>단방향 데이터 흐름</h3>
<p>모든 props는 자식 속성과 부모 속성 사이에 <strong>아래로 단방향 바인딩(one-way-down binding)</strong>을 형성합니다. 부모 속성이 업데이트되면 자식으로 흐르지만 반대 방향은 아닙니다. 이렇게하면 하위 컴포넌트가 실수로 앱의 데이터 흐름을 이해하기 힘들게 만드는 상위 컴포넌트 상태 변경을 방지할 수 있습니다.</p>
<p>또한, 부모 컴포넌트가 업데이트될 때마다 자식 컴포넌트의 모든 prop들이 최신 값으로 새로고침됩니다. 즉, 하위 컴포넌트에서 prop를 변경하려고 시도해서는 <strong>안됩니다</strong>. 그렇게하면 Vue는 콘솔에서 경고합니다.</p>
<p>일반적으로 prop를 변경하려는 2가지 경우가 있습니다</p>
<ol>
<li><strong>prop는 초기 값을 전달하는데 사용됩니다. 하위 컴포넌트는 나중에 prop값을 로컬 data속성으로 사용하려고 합니다</strong>. 이 경우 prop를 초기 값으로 사용하는 로컬 data 속성을 정의하는 것이 가장 좋습니다.<pre><code>props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
}
}</code></pre>
</li>
<li><strong>prop는 변환해야 하는 원시 값으로 전달됩니다.</strong> 이 경우 prop의 값을 사용하여 computed 속성을 정의하는 것이 가장 좋습니다.<pre><code>props: ['size'],
computed: {
normalizedSize: function () {
 return this.size.trim().toLowerCase()
}
}</code></pre>
</li>
</ol>
<h3>Prop 대소문자 구분 (camelCase vs kebab-case)</h3>
<p>HTML 속성명은 대소문자를 구분하지 않으므로, 브라우저는 모든 대문자를 소문자로 해석합니다. 즉, DOM내 템플릿을 사용할 때 camelCase된 prop명은 kebab-case(하이픈으로 구분)된 해당 항목을 사용해야 합니다.</p>
<pre><code>const app = Vue.createApp({})

app.component('blog-post', {
  // JavaScript에서의 camelCase
  props: ['postTitle'],
  template: '&lt;h3&gt;{{ postTitle }}&lt;/h3&gt;'
})</code></pre>
<pre><code>&lt;!-- HTML에서의 kebab-case --&gt;
&lt;blog-post post-title="hello!"&gt;&lt;/blog-post&gt;</code></pre>
<h2>부모 컴포넌트에서 자식 컴포넌트 이벤트 직접 발생시키기</h2>
<p><code>this.$refs</code>로 ref로 설정 된 id를 통해서 해당 컴포넌트에 접근이 가능하다.</p>
<pre><code>&lt;template&gt;
    &lt;button type="button" @click="childFunc" ref="btn"&gt;Click&lt;/button&gt;
&lt;/template&gt;
&lt;script&gt;
    export default {
        methods: {
            childFunc() {
                console.log("부모 컴포넌트에서 직접 발생시킨 이벤트")
            }
        }
    }
&lt;/script&gt;</code></pre>
<pre><code>&lt;template&gt;
   &lt;child-component @send-message="sendmessage" ref="child_component" /&gt;
&lt;/template&gt;

&lt;script&gt;
    import ChildComponent from './ChildComponent'
    export default {
        components: { ChildComponent },
        mounted() {
            this.$refs.child_component.$refs.btn.click()
        }
    }
&lt;/script&gt;</code></pre>
<h3>자식 컴포넌트에서 부모 컴포넌트로 이벤트/데이터 전달</h3>
<pre><code>&lt;template&gt;
    &lt;button type="button" @click="childFunc" ref="btn"&gt;Click&lt;/button&gt;
&lt;/template&gt;
&lt;script&gt;
    export default {
        data() {
            return {
                message: 'Send Parent'
            }
        },
        methods: {
            childFunc() {
                console.log("부모 컴포넌트에서 직접 발생시킨 이벤트")
            },
            callFromParent() {
                console.log("부모 컴포넌트에서 직접 호출")
            }
        },
        mounted() {
            this.$emit('send-message', this.message)
        }
    }
&lt;/script&gt;</code></pre>
<pre><code>&lt;template&gt;
   &lt;child-component @send-message="sendMessage" ref="child_component" /&gt;
&lt;/template&gt;

&lt;script&gt;
    import ChildComponent from './ChildComponent'
    export default {
        components: { ChildComponent },
        mounted() {
            this.$refs.child_component.$refs.btn.click()
            this.$refs.child_component.callFromParent()
        },
        methods: {
            sendMessage(data) {
                console.log(data)
            }
        }
    }
&lt;/script&gt;</code></pre>
<p>자식 컴포넌트에서 부모 컴포넌트로 이벤트 전달하기 위해서 <code>$emit</code>을 사용하면 된다.</p>
<h2>slot</h2>
<p>유사한 모습의 컴포넌트를 재활용할 수 있는 방법으로 HTML의 형식을 고정해두고, 해당 Slot을 여러 컴포넌트에서 재사용할 수 있다.</p>
<pre><code>&lt;template&gt;
    &lt;h2&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/h2&gt;
&lt;/template&gt;
&lt;script&gt;
    export default {
        props: {
            title: {
                type: String,
                default: "페이지 제목입니다."
            }
        }
    }
&lt;/script&gt;</code></pre>
<pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;PageTitle&gt;{{title}}&lt;/PageTitle&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import PageTitle from '../components/PageTitle'
export default {
    data() {
        return {
            title: "Nested Component!!"
        }
    },
    components: { PageTitle }
}
&lt;/script&gt;</code></pre>
<h3>named slot</h3>
<pre><code>&lt;div class="container"&gt;
  &lt;header&gt;
    &lt;slot name="header"&gt;
  &lt;/header&gt;
  &lt;main&gt;
    &lt;slot&gt;
  &lt;/main&gt;
  &lt;footer&gt;
    &lt;slot name="footer"&gt;
  &lt;/footer&gt;
&lt;/div&gt;</code></pre>
<pre><code>&lt;base-layout&gt;
  &lt;template v-slot:header&gt;
    &lt;h1&gt;Here might be a page title&lt;/h1&gt;
  &lt;/template&gt;

  &lt;template v-slot:default&gt;
    &lt;p&gt;A paragraph for the main content.&lt;/p&gt;
    &lt;p&gt;And another one.&lt;/p&gt;
  &lt;/template&gt;

  &lt;template v-slot:footer&gt;
    &lt;p&gt;Here's some contact info&lt;/p&gt;
  &lt;/template&gt;
&lt;/base-layout&gt;</code></pre>
<p><code>name</code> 을 갖지 않는 <code>&lt;slot&gt;</code>은 묵시적으로 "default"라는 name을 갖습니다.</p>
<p>이름을 가진 slot에 컨텐츠를 제공하기 위해서는 <code>&lt;template&gt;</code> 엘리먼트에 <code>v-slot</code> 지시자를 사용합니다.<br><code>v-slot</code>의 매개변수로는 각 slot의 이름을 전달합니다.</p>
<pre><code>&lt;base-layout&gt;
  &lt;template v-slot:header&gt;
    &lt;h1&gt;Here might be a page title&lt;/h1&gt;
  &lt;/template&gt;

  &lt;template v-slot:default&gt;
    &lt;p&gt;A paragraph for the main content.&lt;/p&gt;
    &lt;p&gt;And another one.&lt;/p&gt;
  &lt;/template&gt;

  &lt;template #footer&gt;
    &lt;p&gt;Here's some contact info&lt;/p&gt;
  &lt;/template&gt;
&lt;/base-layout&gt;</code></pre>
<p><code>v-slot</code> 대신에 축약으로 <code>#</code>도 사용 가능하다.</p>
<h2>Provide/Inject</h2>
<p>부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 해야 할때, depth가 깊어지는 경우 props를 불필요하게 전달 해야 하는데, 이 때 Provde / Inject를 통해 원하는 자식 컴포넌트에게 데이터를 전달 할 수 있다.</p>
<pre><code>&lt;template&gt;
  &lt;ProvideInjectChild /&gt;
&lt;/template&gt;
&lt;script&gt;
    import ProvideInjectChild from './ProvideInjectChild'
    export default {
        components: {
            ProvideInjectChild
        },
        data() {
            return {
                items: [
                    'A',
                    'B'
                ]
            }
        },
        provide() {
            return {
                item: this.items
            }
        }
    }
&lt;/script&gt;
</code></pre>
<pre><code>&lt;script&gt;
export default {
    inject: ['item'],
    mounted() {
        console.log(this.item)
        console.log(this.item[0])
    }
}
&lt;/script&gt;</code></pre>
            
</div></div>

Seungdols Company

seungdols

component nested component  
Page Title
   
  
   props  {{..            
카카오스토리
트위터
페이스북
'프로그래밍 > JavaScript' 카테고리의 다른 글
VueJS 학습 - TypeScript 사용  (0)
23:23:09
VueJS 학습 - Basic  (0)
23:19:55
vuejs minimizer 설정 변경  (0)
2022.09.16
vite build 오류  (0)
2022.09.07
코드스피츠 77 - ES6+ 기초편 6회차  (Generator, Promise, Async/Await)  (0)
2022.04.27

VueJS 학습 - Component

댓글