Các khe thành phần có phạm vi trong Vue.js
Mặc dù các khe cắm thành phần cơ bản đều tốt và đẹp, đôi khi bạn muốn mẫu bên trong khe cắm có thể truy cập dữ liệu từ thành phần con lưu trữ nội dung vị trí. Ví dụ: nếu bạn đang cố gắng cho phép các mẫu tùy chỉnh trong containers trong khi vẫn giữ quyền truy cập vào các thuộc tính dữ liệu của containers đó, bạn cần sử dụng vùng có phạm vi .Khe cắm theo phạm vi là một tính năng mới được giới thiệu trong Vue 2.1.0 . Chúng cho phép bạn chuyển các thuộc tính từ các thành phần con của bạn vào một vị trí có phạm vi và truy cập chúng từ phụ huynh. Sắp xếp giống như chuyển thuộc tính ngược lại.
Bước đầu tiên để tạo vị trí thành phần có phạm vi là chuyển các thuộc tính vào một vị trí mặc định hoặc được đặt tên từ thành phần con của bạn, như sau:
<template> <div> <p>Look, there's a slot below me!</p> <slot :text="defaultSlotText"></slot> <slot name="literally-the-best" :text="namedSlotText"></slot> </div> </template> <script> export default { data() { return { defaultSlotText: "I'll get rendered inside the default slot.", namedSlotText: "I'll get rendered inside the *best* slot." } } } </script> Sau đó, để sử dụng các thuộc tính đó bên trong nội dung vị trí của thành phần mẹ, hãy tạo một phần tử mẫu gắn với vị trí đó. Thêm thuộc tính phạm vi vào phần tử mẫu và đặt nó thành tên mà bạn muốn truy cập vào thuộc tính phạm vi. Điều này về cơ bản tạo ra một biến local cho bất kỳ thứ gì bên trong mẫu đó, cho phép bạn truy cập nó như thể nó nằm trong phạm vi của cha mẹ.
(Ví dụ: scope = “myScope” , các thuộc tính được truyền vào <slot> sẽ có thể truy cập được với tên {{myScope.myProperty}} trong khi scope = “yourScope” sẽ được truy cập với tên {{yourScope.myProperty}}. )
Lưu ý: Phần tử mẫu không được thêm vào DOM. Nó chỉ đơn giản là một shell bọc.
<template> <div> <child-component> <template scope="defaultSlotScope"> <p>{{defaultSlotScope.text}}</p> <!-- Renders <p>I'll get rendered inside the default slot.</p> --> </template> <template slot="literally-the-best" scope="bestSlotScope"> <p>{{bestSlotScope.text}}</p> <!-- Renders <p>I'll get rendered inside the *best* slot.</p> --> </template> </child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent } } </script> Nếu bạn đang sử dụng Vue 2.5 trở lên, hãy sử dụng thuộc tính slot-scope thay vì scope . Ngoài ra, bạn có thể bỏ qua các phần tử mẫu.
<template> <div> <child-component> <p slot-scope="defaultSlotScope"> {{defaultSlotScope.text}} <!-- Renders <p>I'll get rendered inside the default slot.</p> --> </p> <p slot="literally-the-best" slot-scope="bestSlotScope"> {{bestSlotScope.text}} <!-- Renders <p>I'll get rendered inside the *best* slot.</p> --> </p> </child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent } } </script> Các tin liên quan
