{"id":542,"date":"2020-03-01T15:38:54","date_gmt":"2020-03-01T07:38:54","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=542"},"modified":"2020-03-01T15:38:54","modified_gmt":"2020-03-01T07:38:54","slug":"vue-slot%e6%8f%92%e6%a7%bd","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/03\/01\/vue-slot%e6%8f%92%e6%a7%bd\/","title":{"rendered":"Vue-slot(\u63d2\u69fd)"},"content":{"rendered":"

slot<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n      <hello>\n        <ul slot=\"a\">\n          <li>111<\/li>\n          <li>111<\/li>\n          <li>111<\/li>\n          <li>111<\/li>\n        <\/ul>\n        <ul slot=\"b\">\n          <li>222<\/li>\n          <li>222<\/li>\n          <li>222<\/li>\n          <li>222<\/li>\n        <\/ul>\n\n        <ul >\n          <li>333<\/li>\n          <li>333<\/li>\n          <li>333<\/li>\n          <li>333<\/li>\n        <\/ul>\n      <\/hello>\n<!--  <swiper>\n            \n      <\/swiper> -->\n    <\/div>\n   \n\n    <script type=\"text\/javascript\">\n    \n      var hello = {\n            template:`<div>\n                <slot name=\"b\"><\/slot>\n                hello\n                <slot name=\"a\"><\/slot>\n\n                <slot><\/slot>\n            <\/div>`\n      }\n\n\n       new Vue({\n        el:\"#box\",\n        data:{\n        },\n        components:{\n          hello\n        }\n       })\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
slot-example<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n        <navbar>\n          <button @click=\"isShow = !isShow\">show\/hide<\/button>\n        <\/navbar>\n        <sidebar v-show=\"isShow\"><\/sidebar>\n\n        <swipe>\n          <li>444444<\/li>\n          <li>555555<\/li>\n          <li>666666<\/li>\n        <\/swipe>\n    <\/div>\n   \n   \n\n    <script type=\"text\/javascript\">\n        \/\/\u5b50\u7ec4\u4ef6\n       Vue.component(\"navbar\",{\n        template:`<div>\n\n          navbar--<slot><\/slot>\n        <\/div>`\n       })\n\n\n       Vue.component(\"sidebar\",{\n        template:`<div>\n\n          sidebar\n          <ul>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n          <\/ul>\n        <\/div>`\n       })\n\n\n       Vue.component(\"swipe\",{\n        template:`<div>\n          <ul>\n              <slot><\/slot>\n          <\/ul>\n\n        <\/div>`\n        \n\n       })\n       \n        var vm = new Vue({\n          el:\"#box\",\n          data:{\n            isShow:false\n          }\n        })\n      \n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
slot\u63d2\u69fd\n    a. \u5355\u4e2aslot\n    b. \u5177\u540dslot\n        *\u6df7\u5408\u7236\u7ec4\u4ef6\u7684\u5185\u5bb9\u4e0e\u5b50\u7ec4\u4ef6\u81ea\u5df1\u7684\u6a21\u677f-->\u5185\u5bb9\u5206\u53d1\n        *\u7236\u7ec4\u4ef6\u6a21\u677f\u7684\u5185\u5bb9\u5728\u7236\u7ec4\u4ef6\u4f5c\u7528\u57df\u5185\u7f16\u8bd1\uff1b\u5b50\u7ec4\u4ef6\u6a21\u677f\u7684\u5185\u5bb9\u5728\u5b50\u7ec4\u4ef6\u4f5c\u7528\u57df\u5185\u7f16\u8bd1\u3002<\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
slot <!DOCTYPE html> <html> <head> <meta cha …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[9,10],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/542"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/542\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}