Có thể truyền một thành phần làm đạo cụ và sử dụng nó trong một thành phần con trong Vue không?

Question

Trong một ứng dụng Vue 2.0, giả sử chúng ta đã thành phần A, B và C.

A kê khai, đăng ký và sử dụng B

Có thể để vượt qua C từ A đến B?

Something như thế này:

<template> 
    <div class="A"> 
    <B :child_component="C" /> 
    </div> 
</template> 

Và sử dụng C trong B bằng cách nào đó.

<template> 
    <div class="B"> 
    <C>Something else</C> 
    </div> 
</template> 

Động lực: Tôi muốn tạo ra một thành phần chung B được sử dụng trong A nhưng nhận được từ A con của nó C. Trên thực tế, A sẽ sử dụng B nhiều lần qua các chữ 'C khác nhau'.

Nếu phương pháp này không chính xác, cách thích hợp để thực hiện điều đó trong Vue là gì?

Answering @Saurabh

Thay vì đi qua như đạo cụ, tôi đã thử gợi ý bên B.

<!-- this is where I Call the dynamic component in B --> 

<component :is="child_component"></component> 

//this is what I did in B js 
components: { 
equip: Equipment 
}, 
data() { 
return { 
    child_component: 'equip', 
    _list: [] 
} 
} 

Về cơ bản tôi đang cố gắng để làm cho thiết bị, nhưng cách năng động

Tôi nhận được 3 lỗi trong bảng điều khiển và một trang trống

[Vue warn]: Error when rendering component at /home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.vue:

Uncaught TypeError: Cannot read property 'name' of undefined

TypeError: Cannot read property 'setAttribute' of undefined

Rõ ràng tôi đang làm điều gì đó sai

Answer 1

Bạn có thể sử dụng thuộc tính đặc biệt is để thực hiện loại điều này. Ví dụ về thành phần động và việc sử dụng nó có thể được tìm thấy here.

You can use the same mount point and dynamically switch between multiple components using the reserved element and dynamically bind to its is attribute:

Mã của bạn sẽ trông giống như sau:

<template> 
    <div class="B"> 
    <component :is="child_component"> Something else</component> 
    </div> 
</template> 

Answer 2

Tổng hợp:

<!-- Component A --> 
<template> 
    <div class="A"> 
    <B> 
     <component :is="child_component"></component> 
    </B> 
    </div> 
</template> 

<script> 
import B from './B.vue'; 
import Equipment from './Equipment.vue'; 

export default { 
    name: 'A', 
    components: { B, Equipment }, 
    data() { 
    return { child_component: 'equipment' }; 
    } 
}; 
</script> 

<!-- Component B --> 
<template> 
    <div class="B"> 
    <h1>Some content</h1> 
    <slot></slot> <!-- Component C will appear here --> 
    </div> 
</template>