Phần tử Vue <thành phần>

❮ Trước Tham khảo các phần tử tích hợp Vue Tiếp theo ❯

Ví dụ

Sử dụng phần tử <component> tích hợp với thuộc tính is để tạo thành phần động.

 <template>
  <h1>Dynamic Components</h1>
  <p>App.vue switches between which component to show.</p>
  <button @click="toggleValue = !toggleValue">Switch component</button>
  <component :is="activeComp"></component>
</template>

Chạy Ví dụ »

Xem thêm ví dụ dưới đây.

Định nghĩa và cách sử dụng

Phần tử <component> tích hợp được sử dụng cùng với thuộc tính is tích hợp để tạo phần tử HTML hoặc thành phần Vue.

Phần tử HTML: Để tạo phần tử HTML có phần tử <component> , is tính is được đặt bằng tên của phần tử HTML mà chúng ta muốn tạo, trực tiếp (Ví dụ 1) hoặc động bằng cách sử dụng v-bind ( Ví dụ 2 ).

Thành phần Vue: Để hiển thị thành phần Vue với phần tử <component> , is tính is được đặt bằng tên của thành phần Vue mà chúng ta muốn tạo, trực tiếp ( Ví dụ 3 ) hoặc động bằng cách sử dụng v-bind để tạo một thành phần động ( Ví dụ 4 ).

Khi tạo một thành phần động, thành phần <KeepAlive> tích hợp có thể được sử dụng xung quanh thành phần <component> để ghi nhớ trạng thái của các thành phần không hoạt động. ( Ví dụ 5 )

Thành phần hoạt động trong thành phần động cũng có thể được thay đổi bằng cách sử dụng biểu thức bậc ba với thuộc tính is . ( Ví dụ 6 )

Lưu ý: Lệnh v-model không hoạt động với các thẻ đầu vào biểu mẫu HTML gốc (chẳng hạn như <input> hoặc <option> ) được tạo bằng phần tử <component> . ( Ví dụ 7 )

đạo cụ

Prop	Description
is	Required. Is set equal to the component that should be active, or is set equal to the HTML element to be created.

Thêm ví dụ

ví dụ 1

Sử dụng phần tử <component> tích hợp để tạo phần tử <div> .

 <template>
  <h2>Example Built-in 'component' Element</h2>
  <p>The component element is rendered as a div element with is="div":</p>
  <component is="div">This is a DIV element</component>
</template>

<style scoped>
div {
  border: solid black 1px;
  background-color: lightgreen;
}
</style>

Chạy Ví dụ »

Ví dụ 2

Sử dụng phần tử <component> tích hợp để chuyển đổi giữa danh sách có thứ tự và danh sách không có thứ tự.

 <template>
  <h2>Example Built-in 'component' Element</h2>
  <p>Using the component element to toggle between an ordered list (ol), and an unordered list (ul):</p>
  <button v-on:click="toggleValue = !toggleValue">Toggle</button>
  <p>Animals from around the world</p>
  <component :is="tagType">
    <li>Kiwi</li>
    <li>Jaguar</li>
    <li>Bison</li>
    <li>Snow Leopard</li>
  </component>
</template>

<script>
export default {
  data() {
    return {
      toggleValue: true
    }
  },
  computed: {
    tagType() {
      if (this.toggleValue) {
        return 'ol'
      }
      else {
        return 'ul'
      }
    }
  }
}
</script>

Chạy Ví dụ »

Ví dụ 3

Sử dụng phần tử <component> tích hợp để hiển thị một thành phần bằng cách cung cấp tên của thành phần đó cho thuộc tính is .

App.vue :

 <template>
  <h2>Example Built-in 'is' Attribute</h2>
  <p>The component element below is set to be a component by the use of 'is="child-comp"'.</p>
  <component is="child-comp"></component>
</template>

ChildComp.vue :

 <template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>This is the child component</p>
  </div>
</template>

<style scoped>
div {
  border: solid black 1px;
  background-color: lightgreen;
  padding: 10px;
  max-width: 250px;
  margin-top: 20px;
}
</style>

Chạy Ví dụ »

Ví dụ 4

Sử dụng phần tử <component> tích hợp để tạo thành phần động, nơi chúng ta có thể chuyển đổi giữa hai thành phần.

 <template>
  <h1>Dynamic Components</h1>
  <p>App.vue switches between which component to show.</p>
  <button @click="toggleValue = !toggleValue">Switch component</button>
  <component :is="activeComp"></component>
</template>

<script>
  export default {
    data () {
      return {
        toggleValue: true
      }
    },
    computed: {
      activeComp() {
        if(this.toggleValue) {
          return 'comp-one'
        }
        else {
          return 'comp-two'
        }
      }
    }
  }
</script>

<style>
  #app {
    width: 350px;
    margin: 10px;
  }
  #app > div {
    border: solid black 2px;
    padding: 10px;
    margin-top: 10px;
  }
</style>

Chạy Ví dụ »

Ví dụ 5

Thành phần <KeepAlive> tích hợp sẵn được sử dụng xung quanh phần tử <component> để ghi nhớ các đầu vào khi các thành phần được chuyển đổi giữa các thành phần.

 <template>
  <h1>Dynamic Components</h1>
  <p>App.vue switches between which component to show.</p>
  <p>With the <KeepAlive> tag the components now remember the user inputs.</p>
  <button @click="toggleValue = !toggleValue">Switch component</button>
  <KeepAlive>
    <component :is="activeComp"></component>
  </KeepAlive>
</template>

<script>
  export default {
    data () {
      return {
        toggleValue: true
      }
    },
    computed: {
      activeComp() {
        if(this.toggleValue) {
          return 'comp-one'
        }
        else {
          return 'comp-two'
        }
      }
    }
  }
</script>

<style>
  #app {
    width: 350px;
    margin: 10px;
  }
  #app > div {
    border: solid black 2px;
    padding: 10px;
    margin-top: 10px;
  }
  h2 {
    text-decoration: underline;
  }
</style>

Chạy Ví dụ »

Ví dụ 6

Sử dụng phần tử <component> với thuộc tính is và biểu thức ternary để chuyển đổi thành phần nào sẽ được kích hoạt.

 <template>
  <h1>Dynamic Components</h1>
  <p>Refresh the page and there is a chance the dynamic component will toggle.</p>
  <component :is="Math.random() > 0.5 ? 'comp-one' : 'comp-two'"></component>
</template>

<style>
  #app {
    width: 350px;
    margin: 10px;
  }
  #app > div {
    border: solid black 2px;
    padding: 10px;
    margin-top: 10px;
  }
</style>

Chạy Ví dụ »

Ví dụ 7

Chứng minh rằng lệnh v-model không hoạt động với phần tử <input> được tạo bằng phần tử <component> .

 <template>
  <h1>Dynamic Components</h1>
  <p><mark>The v-model directive does not work with input element created with the component element.</mark></p>
  <hr>
  <p>Does not work, not updating:</p>
  <component is="input" type="number" v-model="inpVal1"></component> (try to change value)
  <p class="pResult1">inpVal1: {{ inpVal1 }}</p>
  <hr>
  <p>How it should work, updates:</p>
  <input type="number" v-model="inpVal2"> (try to change value)
  <p class="pResult2">inpVal2: {{ inpVal2 }}</p>
</template>

<script>
export default {
  data() {
    return {
      inpVal1: 4,
      inpVal2: 7,
    }
  }
}
</script>

<style>
#app {
  width: 350px;
  margin: 10px;
}
.pResult1 {
  background-color: lightpink;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  padding: 5px;
}
.pResult2 {
  background-color: lightgreen;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  padding: 5px;
}
</style>

Chạy Ví dụ »