{"id":652,"date":"2021-08-27T17:14:50","date_gmt":"2021-08-27T09:14:50","guid":{"rendered":"http:\/\/blog.viter.top\/?p=652"},"modified":"2021-08-27T17:15:50","modified_gmt":"2021-08-27T09:15:50","slug":"%e9%9d%9e-prop-%e7%9a%84-attribute","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2021\/08\/27\/%e9%9d%9e-prop-%e7%9a%84-attribute\/","title":{"rendered":"\u975e Prop \u7684 Attribute"},"content":{"rendered":"\n

App.vue<\/p>\n\n\n\n

<props-test\n    id=\"sss\"\n    :data-show=\"'activated'\"\n    @change=\"showChange\"\n    msg1=\"msg-ssss\"\n    msg2=\"msg-aaaa\"\n  ><\/props-test><\/code><\/pre>\n\n\n\n
PropsTest.vue<\/p>\n\n\n\n
<template>\n  <div>\n    <!-- <div class=\"propsTest\" :=\"$attrs\" @click=\"changePros\">data-status=\"activated\"<\/div>\n    \n    <input type=\"datetime-local\" :=\"$attrs\" \/> -->\n    <!-- <div>\n      <select>\n        <option value=\"1\">Yesterday<\/option>\n        <option value=\"2\">Today<\/option>\n        <option value=\"3\">Tomorrow<\/option>\n      <\/select>\n    <\/div>\n    <div>\n      <input type=\"text\" \/>\n    <\/div> -->\n    <header>header<\/header>\n    <main v-bind=\"$attrs\">main<\/main>\n    <footer>footer<\/footer>\n  <\/div>\n<\/template>\n\n<script>\nimport { toRaw } from 'vue';\nexport default {\n  name: 'PropsTest',\n  \/\/ inheritAttrs: false,\n  props: ['msg1', 'msg2'],\n  setup(props) {\n    console.log('props', props);\n    \n    const changePros = (e) => {\n      \/\/ console.log('e-changePros',e.target.attributes['data-v'].value);\n      console.log('e-changePros',e);      \n    }\n    return {\n      changePros\n    }\n  },\n  created() {\n    console.log(\"this.$attrs\", this.$attrs);\n    console.log(\"toRaw---this.$attrs\", toRaw(this.$attrs));\n  },\n};\n<\/script>\n\n<style lang=\"scss\" scoped>\n.propsTest {\n  color: red;\n}\n\/\/ [data-show=activated] {\n\/\/   display: none;\n\/\/ }\n<\/style><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
App.vue PropsTest.vue<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[9,10],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/652"}],"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=652"}],"version-history":[{"count":3,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/652\/revisions\/655"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}