이 글에서는 주로 자식 컴포넌트에 부모 컴포넌트가 전달한 템플릿을 표시하는 vue 슬롯을 소개합니다. 필요한 친구는 참고하면 됩니다.
부모 컴포넌트는 슬롯 속성을 지정하지 않으며 기본값은 default
할 수 있습니다. 상위 구성 요소가 해당 슬롯을 통과하지 않으면 기본값이 표시됩니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <p id="app"> <modal> <!-- 调用父组件的方法 --> <h1 @click='click'>aaa</h1></modal> <modal> <h2>bbb</h2></modal> <modal> <!-- 使用slot设置模板中的名字,会插入到指定的slot中 --> <p slot='title'>hello</p> <p slot='content'> world </p> </modal> <modal></modal> </p> <template id="modal"> <!-- 使用slot在子组件中显示父组件传过来的模板 --> <p> modal <slot name='default'>如果没有会使用这个默认值</slot> <h1> title: <slot name='title'> </slot> </h1> content: <slot name='content'></slot> </p> </template> <script type="text/javascript"> let modal = { template: '#modal' } new Vue({ el: '#app', components: { // es 简写 ,只写一个的意思为 // modal:modal modal }, methods: { click() { console.log('aaa') } } }) </script> </body> </html>
위 내용은 모두에게 도움이 되기를 바랍니다. 미래.
관련 기사:
JS 형식에서 값 전송 및 URL 인코딩 변환을 구현하는 방법은 무엇입니까?
jQuery를 사용하여 왼쪽 및 오른쪽 슬라이딩 토글 방식을 구현하는 방법은 무엇입니까?
vue에서 모바일 측 스크롤 방법을 구현하는 방법은 무엇입니까?
위 내용은 하위 구성 요소의 상위 구성 요소가 전달한 템플릿을 표시하기 위해 vue에서 슬롯을 구현하는 방법(자세한 자습서)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!