vue attribute

$data

• 컴포넌트에서 data 속성에 정의(return)한 reactive한 값들을 객체로 뽑아준다.

<template>
  <h2>{{ $data }}</h2>
</template>

<script>
export default {
  name: "App",
  data() {
    this.a = 1;
    return {
      name: "duckgugong",
      food: "chicken",
    };
  },
};
</script>

• this.a = 1은 reactive하지 않으므로 화면에 나타나지 않는다.

$props

• 부모로부터 건내받은 props를 object 형식으로 받을 수 있다.

부모 컴포넌트

<template>
  <Child :name="'duck'" :food="'chicken'" />
</template>

<script>
import Child from "./components/Child.vue";
export default {
  components: { Child },
  name: "App",
};
</script>

자식 컴포넌트

• props 속성을 통해 부모로부터 받은 props를 명시해야 $props로 받을 수 있다

<template>
  <h2>props: {{ $props }}</h2>
</template>

<script>
export default {
  props: ["name", "food"],
};
</script>

$el

• 해당 컴포넌트의 HTML(element들)을 뽑아준다.
• $el을 통해 현재 컴포넌트의 HTML을 조회해서 querySelector를 사용할 수 있다.
• 최상위 엘리먼트가 하나만 존재해야 정상적으로 작동한다!

<template>
  <div>
    <h1 class="title">Hi, i'm duckgugong</h1>
    <h3 id="test">$el test!</h3>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    console.log(this.$el);
    console.log(this.$el.querySelector(".title"));
    console.log(this.$el.querySelector("#test"));
  },
};
</script>

 

$options

• export default 구문안에 작성한 컴포넌트와 관련된 name 등 정보를 얻을 수 있는 어트리뷰트!

<template>
  <h1>$options test</h1>
</template>

<script>
export default {
  name: "App",
  props: ["a", "b"],
  data() {
    return {
      name: "duckgugong",
    };
  },
  mounted() {
    console.log(this.$options);
  },
};
</script>

$refs

• 컴포넌트에서 엘리먼트에 ref라는 속성 값을 부여해서 직접 요소에 접근할 수 있는 방법이다.
• ref 속성에 접근하기 위해서 $refs 속성을 사용하면 되는데 주의할 점이 있다!
  • $refs는 컴포넌트가 렌더링 된 후에 존재하게 된다. 해당 속성은 자식 요소에 직접 접근하기 위해서만 사용한다.
  • 즉, 템플릿이나 computed 속성에서 $refs에 접근해서는 안됨! 

• 아래 예시를 통해 text의 color를 ref로 변경해보자!