<!doctype html><html data-n-head-ssr> <head > <meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" property="twitter:site" content="@dropcoderu"><meta data-n-head="ssr" property="twitter:creator" content="@dropcoderu"><meta data-n-head="ssr" property="twitter:title" content="Как использовать свойства компонента в Vue.js?"><meta data-n-head="ssr" property="twitter:description" content="Как использовать свойства компонента в Vue.js?"><meta data-n-head="ssr" property="og:title" content="Как использовать свойства компонента в Vue.js?"><meta data-n-head="ssr" property="og:url" content="https://dropcode.ru/thread/kak-ispol-zovat-svoistva-komponenta-v-vue-js"><meta data-n-head="ssr" property="og:description" content="Как использовать свойства компонента в Vue.js?"><meta data-n-head="ssr" property="og:site_name" content="Место где разработчики учатся и делятся кодом"><meta data-n-head="ssr" data-hid="description" name="description" content="Как использовать свойства компонента в Vue.js?"><title>Как использовать свойства компонента в Vue.js?</title><link data-n-head="ssr" rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto"><link data-n-head="ssr" rel="stylesheet" href="https://forum-static.fra1.cdn.digitaloceanspaces.com/css/f583ffc5-8cec-409c-8843-65dc51f6aa2f/custom.css"><link data-n-head="ssr" rel="icon" type="image/png" href="https://forum-static.fra1.cdn.digitaloceanspaces.com/images/f583ffc5-8cec-409c-8843-65dc51f6aa2f/favicon.png"><link data-n-head="ssr" data-hid="i18n-can" rel="canonical" href="https://dropcode.ru/thread/kak-ispol-zovat-svoistva-komponenta-v-vue-js"><style data-n-head="vuetify" type="text/css" id="vuetify-theme-stylesheet" nonce="undefined">.v-application a { color: #ff6b00; }.v-application .primary { background-color: #ff6b00 !important; border-color: #ff6b00 !important;}.v-application .primary--text { color: #ff6b00 !important; caret-color: #ff6b00 !important;}.v-application .primary.lighten-5 { background-color: #fff897 !important; border-color: #fff897 !important;}.v-application .primary--text.text--lighten-5 { color: #fff897 !important; caret-color: #fff897 !important;}.v-application .primary.lighten-4 { background-color: #ffdb7b !important; border-color: #ffdb7b !important;}.v-application .primary--text.text--lighten-4 { color: #ffdb7b !important; caret-color: #ffdb7b !important;}.v-application .primary.lighten-3 { background-color: #ffbe60 !important; border-color: #ffbe60 !important;}.v-application .primary--text.text--lighten-3 { color: #ffbe60 !important; caret-color: #ffbe60 !important;}.v-application .primary.lighten-2 { background-color: #ffa245 !important; border-color: #ffa245 !important;}.v-application .primary--text.text--lighten-2 { color: #ffa245 !important; caret-color: #ffa245 !important;}.v-application .primary.lighten-1 { background-color: #ff8629 !important; border-color: #ff8629 !important;}.v-application .primary--text.text--lighten-1 { color: #ff8629 !important; caret-color: #ff8629 !important;}.v-application .primary.darken-1 { background-color: #de5000 !important; border-color: #de5000 !important;}.v-application .primary--text.text--darken-1 { color: #de5000 !important; caret-color: #de5000 !important;}.v-application .primary.darken-2 { background-color: #be3400 !important; border-color: #be3400 !important;}.v-application .primary--text.text--darken-2 { color: #be3400 !important; caret-color: #be3400 !important;}.v-application .primary.darken-3 { background-color: #9f1100 !important; border-color: #9f1100 !important;}.v-application .primary--text.text--darken-3 { color: #9f1100 !important; caret-color: #9f1100 !important;}.v-application .primary.darken-4 { background-color: #810000 !important; border-color: #810000 !important;}.v-application .primary--text.text--darken-4 { color: #810000 !important; caret-color: #810000 !important;}.v-application .secondary { background-color: #0095ff !important; border-color: #0095ff !important;}.v-application .secondary--text { color: #0095ff !important; caret-color: #0095ff !important;}.v-application .secondary.lighten-5 { background-color: #d3ffff !important; border-color: #d3ffff !important;}.v-application .secondary--text.text--lighten-5 { color: #d3ffff !important; caret-color: #d3ffff !important;}.v-application .secondary.lighten-4 { background-color: #b3ffff !important; border-color: #b3ffff !important;}.v-application .secondary--text.text--lighten-4 { color: #b3ffff !important; caret-color: #b3ffff !important;}.v-application .secondary.lighten-3 { background-color: #92e6ff !important; border-color: #92e6ff !important;}.v-application .secondary--text.text--lighten-3 { color: #92e6ff !important; caret-color: #92e6ff !important;}.v-application .secondary.lighten-2 { background-color: #70cbff !important; border-color: #70cbff !important;}.v-application .secondary--text.text--lighten-2 { color: #70cbff !important; caret-color: #70cbff !important;}.v-application .secondary.lighten-1 { background-color: #49afff !important; border-color: #49afff !important;}.v-application .secondary--text.text--lighten-1 { color: #49afff !important; caret-color: #49afff !important;}.v-application .secondary.darken-1 { background-color: #007ce2 !important; border-color: #007ce2 !important;}.v-application .secondary--text.text--darken-1 { color: #007ce2 !important; caret-color: #007ce2 !important;}.v-application .secondary.darken-2 { background-color: #0063c6 !important; border-color: #0063c6 !important;}.v-application .secondary--text.text--darken-2 { color: #0063c6 !important; caret-color: #0063c6 !important;}.v-application .secondary.darken-3 { background-color: #004caa !important; border-color: #004caa !important;}.v-application .secondary--text.text--darken-3 { color: #004caa !important; caret-color: #004caa !important;}.v-application .secondary.darken-4 { background-color: #00368f !important; border-color: #00368f !important;}.v-application .secondary--text.text--darken-4 { color: #00368f !important; caret-color: #00368f !important;}.v-application .accent { background-color: #0095ff !important; border-color: #0095ff !important;}.v-application .accent--text { color: #0095ff !important; caret-color: #0095ff !important;}.v-application .accent.lighten-5 { background-color: #d3ffff !important; border-color: #d3ffff !important;}.v-application .accent--text.text--lighten-5 { color: #d3ffff !important; caret-color: #d3ffff !important;}.v-application .accent.lighten-4 { background-color: #b3ffff !important; border-color: #b3ffff !important;}.v-application .accent--text.text--lighten-4 { color: #b3ffff !important; caret-color: #b3ffff !important;}.v-application .accent.lighten-3 { background-color: #92e6ff !important; border-color: #92e6ff !important;}.v-application .accent--text.text--lighten-3 { color: #92e6ff !important; caret-color: #92e6ff !important;}.v-application .accent.lighten-2 { background-color: #70cbff !important; border-color: #70cbff !important;}.v-application .accent--text.text--lighten-2 { color: #70cbff !important; caret-color: #70cbff !important;}.v-application .accent.lighten-1 { background-color: #49afff !important; border-color: #49afff !important;}.v-application .accent--text.text--lighten-1 { color: #49afff !important; caret-color: #49afff !important;}.v-application .accent.darken-1 { background-color: #007ce2 !important; border-color: #007ce2 !important;}.v-application .accent--text.text--darken-1 { color: #007ce2 !important; caret-color: #007ce2 !important;}.v-application .accent.darken-2 { background-color: #0063c6 !important; border-color: #0063c6 !important;}.v-application .accent--text.text--darken-2 { color: #0063c6 !important; caret-color: #0063c6 !important;}.v-application .accent.darken-3 { background-color: #004caa !important; border-color: #004caa !important;}.v-application .accent--text.text--darken-3 { color: #004caa !important; caret-color: #004caa !important;}.v-application .accent.darken-4 { background-color: #00368f !important; border-color: #00368f !important;}.v-application .accent--text.text--darken-4 { color: #00368f !important; caret-color: #00368f !important;}.v-application .error { background-color: #ff6b00 !important; border-color: #ff6b00 !important;}.v-application .error--text { color: #ff6b00 !important; caret-color: #ff6b00 !important;}.v-application .error.lighten-5 { background-color: #fff897 !important; border-color: #fff897 !important;}.v-application .error--text.text--lighten-5 { color: #fff897 !important; caret-color: #fff897 !important;}.v-application .error.lighten-4 { background-color: #ffdb7b !important; border-color: #ffdb7b !important;}.v-application .error--text.text--lighten-4 { color: #ffdb7b !important; caret-color: #ffdb7b !important;}.v-application .error.lighten-3 { background-color: #ffbe60 !important; border-color: #ffbe60 !important;}.v-application .error--text.text--lighten-3 { color: #ffbe60 !important; caret-color: #ffbe60 !important;}.v-application .error.lighten-2 { background-color: #ffa245 !important; border-color: #ffa245 !important;}.v-application .error--text.text--lighten-2 { color: #ffa245 !important; caret-color: #ffa245 !important;}.v-application .error.lighten-1 { background-color: #ff8629 !important; border-color: #ff8629 !important;}.v-application .error--text.text--lighten-1 { color: #ff8629 !important; caret-color: #ff8629 !important;}.v-application .error.darken-1 { background-color: #de5000 !important; border-color: #de5000 !important;}.v-application .error--text.text--darken-1 { color: #de5000 !important; caret-color: #de5000 !important;}.v-application .error.darken-2 { background-color: #be3400 !important; border-color: #be3400 !important;}.v-application .error--text.text--darken-2 { color: #be3400 !important; caret-color: #be3400 !important;}.v-application .error.darken-3 { background-color: #9f1100 !important; border-color: #9f1100 !important;}.v-application .error--text.text--darken-3 { color: #9f1100 !important; caret-color: #9f1100 !important;}.v-application .error.darken-4 { background-color: #810000 !important; border-color: #810000 !important;}.v-application .error--text.text--darken-4 { color: #810000 !important; caret-color: #810000 !important;}.v-application .info { background-color: #0095ff !important; border-color: #0095ff !important;}.v-application .info--text { color: #0095ff !important; caret-color: #0095ff !important;}.v-application .info.lighten-5 { background-color: #d3ffff !important; border-color: #d3ffff !important;}.v-application .info--text.text--lighten-5 { color: #d3ffff !important; caret-color: #d3ffff !important;}.v-application .info.lighten-4 { background-color: #b3ffff !important; border-color: #b3ffff !important;}.v-application .info--text.text--lighten-4 { color: #b3ffff !important; caret-color: #b3ffff !important;}.v-application .info.lighten-3 { background-color: #92e6ff !important; border-color: #92e6ff !important;}.v-application .info--text.text--lighten-3 { color: #92e6ff !important; caret-color: #92e6ff !important;}.v-application .info.lighten-2 { background-color: #70cbff !important; border-color: #70cbff !important;}.v-application .info--text.text--lighten-2 { color: #70cbff !important; caret-color: #70cbff !important;}.v-application .info.lighten-1 { background-color: #49afff !important; border-color: #49afff !important;}.v-application .info--text.text--lighten-1 { color: #49afff !important; caret-color: #49afff !important;}.v-application .info.darken-1 { background-color: #007ce2 !important; border-color: #007ce2 !important;}.v-application .info--text.text--darken-1 { color: #007ce2 !important; caret-color: #007ce2 !important;}.v-application .info.darken-2 { background-color: #0063c6 !important; border-color: #0063c6 !important;}.v-application .info--text.text--darken-2 { color: #0063c6 !important; caret-color: #0063c6 !important;}.v-application .info.darken-3 { background-color: #004caa !important; border-color: #004caa !important;}.v-application .info--text.text--darken-3 { color: #004caa !important; caret-color: #004caa !important;}.v-application .info.darken-4 { background-color: #00368f !important; border-color: #00368f !important;}.v-application .info--text.text--darken-4 { color: #00368f !important; caret-color: #00368f !important;}.v-application .success { background-color: #0095ff !important; border-color: #0095ff !important;}.v-application .success--text { color: #0095ff !important; caret-color: #0095ff !important;}.v-application .success.lighten-5 { background-color: #d3ffff !important; border-color: #d3ffff !important;}.v-application .success--text.text--lighten-5 { color: #d3ffff !important; caret-color: #d3ffff !important;}.v-application .success.lighten-4 { background-color: #b3ffff !important; border-color: #b3ffff !important;}.v-application .success--text.text--lighten-4 { color: #b3ffff !important; caret-color: #b3ffff !important;}.v-application .success.lighten-3 { background-color: #92e6ff !important; border-color: #92e6ff !important;}.v-application .success--text.text--lighten-3 { color: #92e6ff !important; caret-color: #92e6ff !important;}.v-application .success.lighten-2 { background-color: #70cbff !important; border-color: #70cbff !important;}.v-application .success--text.text--lighten-2 { color: #70cbff !important; caret-color: #70cbff !important;}.v-application .success.lighten-1 { background-color: #49afff !important; border-color: #49afff !important;}.v-application .success--text.text--lighten-1 { color: #49afff !important; caret-color: #49afff !important;}.v-application .success.darken-1 { background-color: #007ce2 !important; border-color: #007ce2 !important;}.v-application .success--text.text--darken-1 { color: #007ce2 !important; caret-color: #007ce2 !important;}.v-application .success.darken-2 { background-color: #0063c6 !important; border-color: #0063c6 !important;}.v-application .success--text.text--darken-2 { color: #0063c6 !important; caret-color: #0063c6 !important;}.v-application .success.darken-3 { background-color: #004caa !important; border-color: #004caa !important;}.v-application .success--text.text--darken-3 { color: #004caa !important; caret-color: #004caa !important;}.v-application .success.darken-4 { background-color: #00368f !important; border-color: #00368f !important;}.v-application .success--text.text--darken-4 { color: #00368f !important; caret-color: #00368f !important;}.v-application .warning { background-color: #ff6b00 !important; border-color: #ff6b00 !important;}.v-application .warning--text { color: #ff6b00 !important; caret-color: #ff6b00 !important;}.v-application .warning.lighten-5 { background-color: #fff897 !important; border-color: #fff897 !important;}.v-application .warning--text.text--lighten-5 { color: #fff897 !important; caret-color: #fff897 !important;}.v-application .warning.lighten-4 { background-color: #ffdb7b !important; border-color: #ffdb7b !important;}.v-application .warning--text.text--lighten-4 { color: #ffdb7b !important; caret-color: #ffdb7b !important;}.v-application .warning.lighten-3 { background-color: #ffbe60 !important; border-color: #ffbe60 !important;}.v-application .warning--text.text--lighten-3 { color: #ffbe60 !important; caret-color: #ffbe60 !important;}.v-application .warning.lighten-2 { background-color: #ffa245 !important; border-color: #ffa245 !important;}.v-application .warning--text.text--lighten-2 { color: #ffa245 !important; caret-color: #ffa245 !important;}.v-application .warning.lighten-1 { background-color: #ff8629 !important; border-color: #ff8629 !important;}.v-application .warning--text.text--lighten-1 { color: #ff8629 !important; caret-color: #ff8629 !important;}.v-application .warning.darken-1 { background-color: #de5000 !important; border-color: #de5000 !important;}.v-application .warning--text.text--darken-1 { color: #de5000 !important; caret-color: #de5000 !important;}.v-application .warning.darken-2 { background-color: #be3400 !important; border-color: #be3400 !important;}.v-application .warning--text.text--darken-2 { color: #be3400 !important; caret-color: #be3400 !important;}.v-application .warning.darken-3 { background-color: #9f1100 !important; border-color: #9f1100 !important;}.v-application .warning--text.text--darken-3 { color: #9f1100 !important; caret-color: #9f1100 !important;}.v-application .warning.darken-4 { background-color: #810000 !important; border-color: #810000 !important;}.v-application .warning--text.text--darken-4 { color: #810000 !important; caret-color: #810000 !important;}</style><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/7b8ec9d.js" as="script"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/25edc65.js" as="script"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/1b7ab17.css" as="style"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/863688a.js" as="script"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/87b7056.css" as="style"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/cb42003.js" as="script"><link rel="stylesheet" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/1b7ab17.css"><link rel="stylesheet" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/87b7056.css"> </head> <body > <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div data-app="true" id="app" class="v-application v-application--is-ltr theme--light" style="font-family:Roboto;"><div class="v-application--wrap"><div tabindex="0" aria-label="Loading" class="vld-overlay is-active is-full-page" style="z-index:999;display:none;"><div class="vld-background" style="background:#fff;opacity:0.5;"></div><div class="vld-icon"><svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" width="65" height="65" stroke="#1976d2"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".25" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.8s" repeatCount="indefinite"></animateTransform></path></g></g></svg></div></div> <!----> <div class="header-section"><header class="v-sheet theme--light elevation-3 v-toolbar v-app-bar v-app-bar--fixed" style="height:56px;margin-top:0px;transform:translateY(0px);left:0px;right:0px;"><div class="v-toolbar__content" style="height:56px;"><div class="row main-menu"><div role="dialog" class="v-dialog__container"><!----></div> <div role="dialog" class="v-dialog__container"><!----></div> <div class="d-none d-lg-flex d-xl-flex d-md-flex justify-space-between pb-5 col col-12"><div class="d-flex align-center col-md-2 col-lg-1 offset-lg-1 col-4"><a href="/" class="d-flex w-100 nuxt-link-active"><div class="logo d-flex w-100"><div aria-label="Место где разработчики учатся и делятся кодом" role="img" class="v-image v-responsive theme--light" style="max-height:50px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></a></div> <!----> <div class="col-md-5 col-lg-5 offset-lg-1 col-4"><button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default primary--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-magnify theme--dark"></i></span></button> <a href="/login" class="v-btn v-btn--contained v-btn--router theme--light v-size--default success"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-message-question-outline theme--light"></i> <span class="d-none d-lg-flex d-xl-flex">Задать вопрос</span></span></a> <a href="/login" class="v-btn v-btn--depressed v-btn--flat v-btn--outlined v-btn--router theme--light v-size--default success--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-login theme--light"></i><span class="d-none d-lg-flex d-xl-flex">Войти</span></span></a> <a href="/register" class="v-btn v-btn--depressed v-btn--flat v-btn--outlined v-btn--router theme--light v-size--default info--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-account-plus-outline theme--light"></i><span class="d-none d-lg-flex d-xl-flex">Регистрация</span></span></a></div></div> <nav class="hidden-md-and-up v-navigation-drawer v-navigation-drawer--close v-navigation-drawer--fixed v-navigation-drawer--is-mobile v-navigation-drawer--temporary theme--light" style="height:100vh;top:0px;transform:translateX(-100%);width:256px;"><div class="v-navigation-drawer__content"><div class="v-list v-sheet theme--light"><a href="/" tabindex="0" router="" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div class="v-list-item__title">Главная</div></div></a> <!----> <!----> <!----> <!----> <a href="/login" tabindex="0" router="" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div class="v-list-item__title">Войти</div></div></a> <a href="/register" tabindex="0" router="" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div class="v-list-item__title">Регистрация</div></div></a> <!----></div></div><div class="v-navigation-drawer__border"></div></nav> <header class="hidden-md-and-up v-sheet theme--light v-toolbar v-app-bar v-app-bar--fixed" style="height:56px;margin-top:0px;transform:translateY(0px);left:0px;right:0px;"><div class="v-toolbar__content" style="height:56px;"><div class="row align-center"><button type="button" class="v-app-bar__nav-icon v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu theme--light"></i></span></button> <div class="d-flex col-10 pr-0 align-center justify-end"><button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default primary--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-magnify theme--dark"></i></span></button> <a href="/login" class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--router theme--light v-size--default success--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-message-question-outline theme--light"></i></span></a> <div class="col-sm-3 col-md-3 col-4"><a href="/" class="nuxt-link-active"><div class="logo d-flex w-100"><div aria-label="Место где разработчики учатся и делятся кодом" role="img" class="v-image v-responsive theme--light" style="max-height:50px;"><div class="v-responsive__sizer" style="padding-bottom:100%;"></div><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></a></div></div></div></div></header></div></div></header></div> <div class="container"><!----> <div class="flex"><ul itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList" class="v-breadcrumbs v-breadcrumbs--large theme--light"><li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a href="/" itemprop="item" class="v-breadcrumbs__item nuxt-link-active"><span itemprop="name">Главная</span></a> <meta content="1" itemprop="position"></li><li class="v-breadcrumbs__divider">></li><li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a href="/forum/javascript" itemprop="item" class="v-breadcrumbs__item"><span itemprop="name">JavaScript</span></a> <meta content="2" itemprop="position"></li><li class="v-breadcrumbs__divider">></li><li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a href="#" itemprop="item" class="v-breadcrumbs__item v-breadcrumbs__item--disabled"><span itemprop="name">Как использовать свойства компонента в Vue.js?</span></a> <meta content="3" itemprop="position"></li></ul></div> <div class="row mx-0 mt-1"><div class="flex md4 lg3 xl2"><div><div class="row d-md-none justify-space-around"><div class="py-0 col-sm-10 col-md-8 col-12"><div class="px-1 transparent v-sheet theme--light"><div class="v-item-group theme--light v-slide-group v-chip-group"><div class="v-slide-group__prev v-slide-group__prev--disabled"><!----></div><div class="v-slide-group__wrapper"><div class="v-slide-group__content"><a href="/forum/java" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default primary--text"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> Java </span></a><a href="/forum/python" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> Python </span></a><a href="/forum/javascript" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> JavaScript </span></a><a href="/forum/php" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> PHP </span></a><a href="/forum/sql" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> SQL </span></a><a href="/forum/golang" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> Golang </span></a><a href="/forum/c-c" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> C/C++ </span></a><a href="/forum/html-css" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> HTML/CSS </span></a><a href="/forum/ruby" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> Ruby </span></a><a href="/forum/swift" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> Swift </span></a><a href="/forum/drugie" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div> Другие </span></a></div></div><div class="v-slide-group__next v-slide-group__next--disabled"><!----></div></div></div></div></div> <div class="row d-none d-lg-flex d-xl-flex d-md-flex pr-3"><div class="w-100 v-card v-sheet theme--light"><header class="v-sheet theme--dark v-toolbar info" style="height:56px;"><div class="v-toolbar__content" style="height:56px;"><div class="v-toolbar__title">Категории</div></div></header> <div style="max-height:800px;overflow-y:auto;"><div><a href="/forum/java" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> Java </div></a></div><div><a href="/forum/python" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> Python </div></a></div><div><a href="/forum/javascript" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> JavaScript </div></a></div><div><a href="/forum/php" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> PHP </div></a></div><div><a href="/forum/sql" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> SQL </div></a></div><div><a href="/forum/golang" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> Golang </div></a></div><div><a href="/forum/c-c" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> C/C++ </div></a></div><div><a href="/forum/html-css" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> HTML/CSS </div></a></div><div><a href="/forum/ruby" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> Ruby </div></a></div><div><a href="/forum/swift" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> Swift </div></a></div><div><a href="/forum/drugie" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><div class="v-image v-responsive mr-1 theme--light" style="height:24px;width:24px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div> <div class="v-list-item__title"> Другие </div></a></div></div></div> <!----></div></div></div> <div class="flex pl-lg-4 pl-md-4 pl-xl-4 md8 lg9 xl10"><div class="flex"><div itemscope="itemscope" itemtype="http://schema.org/DiscussionForumPosting" class="row"><div class="col-sm-12 col-md-8 col-lg-8 col-12"><h1 itemprop="headline">Как использовать свойства компонента в Vue.js?</h1></div> <div class="text-md-right text-center col-sm-12 col-md-4 col-lg-4 col-12"><!----> <!----> <button type="button" class="v-btn v-btn--contained theme--dark v-size--default primary"><span class="v-btn__content">Новое сообщение </span></button></div></div> <div role="dialog" class="v-dialog__container"><!----></div> <div class="row"><div class="col col-12"><div class="v-card v-sheet theme--light"><div role="list" class="v-list v-sheet theme--light"><div tabindex="-1" role="listitem" class="v-list-item theme--light"><div class="row thread-row" data-v-3262fcae><!----> <!----> <!----> <!----> <!----> <div class="row mx-3" data-v-3262fcae data-v-3262fcae><div class="col-sm-3 col-md-3 col-lg-2 col-xl-1 col-12" data-v-3262fcae data-v-3262fcae><div itemscope="itemscope" itemtype="http://schema.org/Person" class="avatar text-center" data-v-3262fcae><div><div class="v-avatar" style="height:50px;min-width:50px;width:50px;"><div aria-label="bernardo_nolan" role="img" class="v-image v-responsive theme--light"><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></div> <p class="my-0 caption">Пользователь</p> <div><a href="/profile/bernardo_nolan" class="d-inline-flex"><p itemprop="name" class="subtitle-2 mb-0"> bernardo_nolan </p></a></div> <!----></div></div> <div class="py-0 col-sm-9 col-md-9 col-lg-10 col-xl-11 col-12" data-v-3262fcae data-v-3262fcae><!----> <div class="py-0 col col-12" data-v-3262fcae data-v-3262fcae><span class="caption" data-v-3262fcae>от <a href="/profile/bernardo_nolan" class="d-inline-flex caption" data-v-3262fcae> bernardo_nolan </a></span>, <span class="caption" data-v-3262fcae>в категории: </span> <span class="caption" data-v-3262fcae><a href="/forum/javascript" class="d-inline-flex caption" data-v-3262fcae> JavaScript </a></span>, <span class="caption" data-v-3262fcae>2 года назад</span></div> <!----> <!----></div> <div class="col col-12" data-v-3262fcae data-v-3262fcae><div class="forum-text ql-viewer" data-v-3262fcae><p>Как использовать свойства компонента в Vue.js?</p></div> <div class="d-flex justify-start flex-wrap flex-lg-nowrap flex-md-nowrap flex-xl-nowrap flex-sm-nowrap" data-v-3262fcae><div class="text-center text-lg-left text-md-left text-xl-left text-sm-left col-sm-5 col-md-4 col-lg-2 col-xl-2 col-12" data-v-3262fcae data-v-3262fcae><div class="like-dislike-buttons pt-3" data-v-0348114a data-v-3262fcae><span class="v-badge v-badge--overlap theme--light" data-v-0348114a><span draggable="false" class="v-chip v-chip--outlined theme--light v-size--default info info--text" data-v-0348114a><span class="v-chip__content"><div class="d-flex justify-center" style="--primary-color:#FF6B00;" data-v-0348114a><a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-up theme--light" data-v-0348114a></i> <small title="47 пользователям нравится" class="like-dislike-buttons__count" data-v-0348114a>47</small></a> <span class="separator" data-v-0348114a>|</span> <a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-down theme--light" data-v-0348114a></i> <small title="Всем нравится" class="like-dislike-buttons__count" data-v-0348114a>0</small></a></div></span></span><span class="v-badge__wrapper"><span aria-atomic="true" aria-label="Badge" aria-live="polite" role="status" class="v-badge__badge error" style="bottom:calc(100% - 12px);left:calc(100% - 12px);right:auto;top:auto;">47</span></span></span></div></div> <div class="col-sm-7 col-md-8 col-lg-10 col-xl-10 col-12" data-v-3262fcae data-v-3262fcae><div class="justify-center icons d-flex col col-12" data-v-11d4c0a4 data-v-11d4c0a4 data-v-3262fcae><a href="https://www.facebook.com/sharer.php?src=sp&u=https%3A%2F%2Fdropcode.ru%2Fthread%2Fkak-ispol-zovat-svoistva-komponenta-v-vue-js&quote=%D0%9A%D0%B0%D0%BA%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0%20%D0%B2%20Vue.js%3F&hashtag=%232x2forum" rel="nofollow noopener" target="_blank" title="Facebook" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/fb.png" width="32" height="32" alt="Facebook" data-v-11d4c0a4></a> <a href="https://vk.com/share.php?url=https%3A%2F%2Fdropcode.ru%2Fthread%2Fkak-ispol-zovat-svoistva-komponenta-v-vue-js&title=%D0%9A%D0%B0%D0%BA%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0%20%D0%B2%20Vue.js%3F&comment=%D0%9A%D0%B0%D0%BA%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0%20%D0%B2%20Vue.js%3F" rel="nofollow noopener" target="_blank" title="Vk" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/vk.png" width="32" height="32" alt="Vk" data-v-11d4c0a4></a> <a href="https://connect.ok.ru/offer?url=https%3A%2F%2Fdropcode.ru%2Fthread%2Fkak-ispol-zovat-svoistva-komponenta-v-vue-js&title=%D0%9A%D0%B0%D0%BA%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0%20%D0%B2%20Vue.js%3F" rel="nofollow noopener" target="_blank" title="Ok" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/ok.png" width="32" height="32" alt="Ok" data-v-11d4c0a4></a> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdropcode.ru%2Fthread%2Fkak-ispol-zovat-svoistva-komponenta-v-vue-js&text=%D0%9A%D0%B0%D0%BA%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0%20%D0%B2%20Vue.js%3F&hashtags=2x2forum" rel="nofollow noopener" target="_blank" title="Twitter" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/twitter.png" width="32" height="32" alt="Twitter" data-v-11d4c0a4></a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdropcode.ru%2Fthread%2Fkak-ispol-zovat-svoistva-komponenta-v-vue-js" rel="nofollow noopener" target="_blank" title="LinkedIn" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/linkedin.png" width="32" height="32" alt="LinkedIn" data-v-11d4c0a4></a> <a href="https://telegram.me/share/url?url=https%3A%2F%2Fdropcode.ru%2Fthread%2Fkak-ispol-zovat-svoistva-komponenta-v-vue-js" rel="nofollow noopener" target="_blank" title="Telegram" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/telegram.png" width="32" height="32" alt="Telegram" data-v-11d4c0a4></a> <a href="https://api.whatsapp.com/send?text=https%3A%2F%2Fdropcode.ru%2Fthread%2Fkak-ispol-zovat-svoistva-komponenta-v-vue-js" rel="nofollow noopener" target="_blank" title="Whatsapp" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/whatsapp.png" width="32" height="32" alt="Whatsapp" data-v-11d4c0a4></a> <!----></div></div></div> <div class="row py-0" data-v-3262fcae data-v-3262fcae><div class="text-center col" data-v-3262fcae data-v-3262fcae></div></div></div></div> <!----> <!----></div></div> <hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <h4 class="my-4 pl-4 text-capitalize"> 2 ответа </h4> <hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <div tabindex="-1" role="listitem" class="v-list-item theme--light"><!----> <div class="row post-row" data-v-145a8bfc data-v-145a8bfc><!----> <!----> <!----> <!----> <!----> <div class="col-sm-3 col-md-2 col-lg-1 col-12" data-v-145a8bfc data-v-145a8bfc><div itemscope="itemscope" itemtype="http://schema.org/Person" class="avatar text-center" data-v-145a8bfc><div><div class="v-avatar" style="height:50px;min-width:50px;width:50px;"><div aria-label="nicolette.stoltenberg" role="img" class="v-image v-responsive theme--light"><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></div> <p class="my-0 caption">Пользователь</p> <div><a href="/profile/nicolette.stoltenberg" class="d-inline-flex"><p itemprop="name" class="subtitle-2 mb-0"> nicolette.stoltenberg </p></a></div> <!----></div></div> <div class="col-sm-9 col-md-10 col-lg-11 col-12" data-v-145a8bfc data-v-145a8bfc><div class="pt-0 col col-12" data-v-145a8bfc data-v-145a8bfc><span class="caption" data-v-145a8bfc>от <a href="/profile/nicolette.stoltenberg" class="d-inline-flex caption" data-v-145a8bfc> nicolette.stoltenberg </a></span>, <span class="caption" data-v-145a8bfc>2 года назад</span></div> <div class="forum-text ql-viewer" data-v-145a8bfc><p><span class="mention"><span><span><span class="mention"><span><span><span class="ql-mention-denotation-char">@</span>bernardo_nolan</span></span></span> </span> </span></span></p><p>В Vue.js свойства компонента используются для передачи данных из родительского компонента в дочерний компонент. Для определения свойств компонента в Vue.js используется объект <code>props</code>.</p><p><br/></p><p>Например, чтобы определить свойство <code>message</code>, которое будет использоваться в дочернем компоненте, можно написать следующий код в родительском компоненте:</p><div style="color:#f8f8f2;background-color:#272822;"><table style="border-spacing:0;padding:0;margin:0;border:0;"><tbody><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20</span></pre></td><td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><<span style="color:#f92672">template</span>> <<span style="color:#f92672">div</span>> <<span style="color:#f92672">child-component</span> <span style="color:#a6e22e">:message</span><span style="color:#f92672">=</span><span style="color:#e6db74">"parentMessage"</span>></<span style="color:#f92672">child-component</span>> </<span style="color:#f92672">div</span>></<span style="color:#f92672">template</span>> <<span style="color:#f92672">script</span>><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ChildComponent</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'./ChildComponent.vue'</span> <span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> { <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">ChildComponent</span> }, <span style="color:#a6e22e">data</span>() { <span style="color:#66d9ef">return</span> { <span style="color:#a6e22e">parentMessage</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Hello from parent'</span> } }}</<span style="color:#f92672">script</span>></pre></td></tr></tbody></table></div><p><br/></p><p>В этом примере мы передаем свойство <code>message</code> с именем <code>parentMessage</code> из родительского компонента в дочерний компонент <code>ChildComponent</code>. В дочернем компоненте <code>ChildComponent</code> мы можем использовать это свойство, используя его имя, как показано ниже:</p><div style="color:#f8f8f2;background-color:#272822;"><table style="border-spacing:0;padding:0;margin:0;border:0;"><tbody><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13</span></pre></td><td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><<span style="color:#f92672">template</span>> <<span style="color:#f92672">div</span>> {{ message }} </<span style="color:#f92672">div</span>></<span style="color:#f92672">template</span>> <<span style="color:#f92672">script</span>><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> { <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span> String }}</<span style="color:#f92672">script</span>></pre></td></tr></tbody></table></div><p><br/></p><p>Обратите внимание, что в объекте <code>props</code> мы определяем имя свойства (<code>message</code>) и его тип (<code>String</code>). В дочернем компоненте мы используем <code>{{ message }}</code> для отображения значения свойства <code>message</code>.</p><p><br/></p><p>Можно также задавать значения по умолчанию для свойств, указав их в объекте <code>props</code> с помощью <code>default</code>:</p><div style="color:#f8f8f2;background-color:#272822;"><table style="border-spacing:0;padding:0;margin:0;border:0;"><tbody><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16</span></pre></td><td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><<span style="color:#f92672">template</span>> <<span style="color:#f92672">div</span>> {{ message }} </<span style="color:#f92672">div</span>></<span style="color:#f92672">template</span>> <<span style="color:#f92672">script</span>><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> { <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> String, <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Default message'</span> } }}</<span style="color:#f92672">script</span>></pre></td></tr></tbody></table></div><p><br/></p><p>Теперь, если свойство <code>message</code> не будет передано из родительского компонента, вместо него будет использоваться значение по умолчанию <code>Default message</code>.</p><p></p></div></div> <!----> <div class="text-center text-lg-left text-md-left text-xl-left text-sm-left col-sm-5 col-md-4 col-lg-2 col-xl-2 col-12" data-v-145a8bfc data-v-145a8bfc><div class="like-dislike-buttons pt-3" data-v-0348114a data-v-145a8bfc><span class="v-badge v-badge--overlap theme--light" data-v-0348114a><span draggable="false" class="v-chip v-chip--outlined theme--light v-size--default info info--text" data-v-0348114a><span class="v-chip__content"><div class="d-flex justify-center" style="--primary-color:#FF6B00;" data-v-0348114a><a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-up theme--light" data-v-0348114a></i> <small title="1 пользователю нравится" class="like-dislike-buttons__count" data-v-0348114a>1</small></a> <span class="separator" data-v-0348114a>|</span> <a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-down theme--light" data-v-0348114a></i> <small title="Всем нравится" class="like-dislike-buttons__count" data-v-0348114a>0</small></a></div></span></span><span class="v-badge__wrapper"><span aria-atomic="true" aria-label="Badge" aria-live="polite" role="status" class="v-badge__badge error" style="bottom:calc(100% - 12px);left:calc(100% - 12px);right:auto;top:auto;">1</span></span></span></div></div> <!----> <div class="col col-12" data-v-145a8bfc data-v-145a8bfc><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light" data-v-145a8bfc></div></div></div><div tabindex="-1" role="listitem" class="v-list-item theme--light"><!----> <div class="row post-row" data-v-145a8bfc data-v-145a8bfc><div class="py-0 col col-12" data-v-145a8bfc data-v-145a8bfc><div data-v-145a8bfc><!----></div></div> <!----> <!----> <!----> <!----> <div class="col-sm-3 col-md-2 col-lg-1 col-12" data-v-145a8bfc data-v-145a8bfc><div itemscope="itemscope" itemtype="http://schema.org/Person" class="avatar text-center" data-v-145a8bfc><div><div class="v-avatar" style="height:50px;min-width:50px;width:50px;"><div aria-label="rebekah" role="img" class="v-image v-responsive theme--light"><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></div> <p class="my-0 caption">Пользователь</p> <div><a href="/profile/rebekah" class="d-inline-flex"><p itemprop="name" class="subtitle-2 mb-0"> rebekah </p></a></div> <!----></div></div> <div class="col-sm-9 col-md-10 col-lg-11 col-12" data-v-145a8bfc data-v-145a8bfc><div class="pt-0 col col-12" data-v-145a8bfc data-v-145a8bfc><span class="caption" data-v-145a8bfc>от <a href="/profile/rebekah" class="d-inline-flex caption" data-v-145a8bfc> rebekah </a></span>, <span class="caption" data-v-145a8bfc>7 месяцев назад</span></div> <div class="forum-text ql-viewer" data-v-145a8bfc><p><span class="mention"><span><span><span class="mention"><span><span><span class="ql-mention-denotation-char">@</span>bernardo_nolan</span></span></span> </span> </span></span></p><p>Дополнительно, помимо передачи данных из родительского компонента в дочерний через свойства, в Vue.js свойства компонента также можно использовать для валидации передаваемых данных.</p><p><br/></p><p>Например, допустим, вы хотите, чтобы свойство message было обязательным и имело тип строка. В данном случае, вы можете определить валидацию для свойства message в объекте props следующим образом:</p><div style="color:#f8f8f2;background-color:#272822;"><table style="border-spacing:0;padding:0;margin:0;border:0;"><tbody><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6</span></pre></td><td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;">props: { message: { type: String, required: true }}</pre></td></tr></tbody></table></div><p><br/></p><p>Теперь, если родительский компонент не передаст значение для свойства message или передаст не строку, будет сгенерирована ошибка в консоли браузера.</p><p><br/></p><p>Таким образом, свойства компонента в Vue.js не только используются для передачи данных, но и для обеспечения безопасности и валидации передаваемых данных между компонентами.</p></div></div> <!----> <div class="text-center text-lg-left text-md-left text-xl-left text-sm-left col-sm-5 col-md-4 col-lg-2 col-xl-2 col-12" data-v-145a8bfc data-v-145a8bfc><div class="like-dislike-buttons pt-3" data-v-0348114a data-v-145a8bfc><span class="v-badge v-badge--overlap theme--light" data-v-0348114a><span draggable="false" class="v-chip v-chip--outlined theme--light v-size--default info info--text" data-v-0348114a><span class="v-chip__content"><div class="d-flex justify-center" style="--primary-color:#FF6B00;" data-v-0348114a><a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-up theme--light" data-v-0348114a></i> <small title="Никому не нравится" class="like-dislike-buttons__count" data-v-0348114a>0</small></a> <span class="separator" data-v-0348114a>|</span> <a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-down theme--light" data-v-0348114a></i> <small title="Всем нравится" class="like-dislike-buttons__count" data-v-0348114a>0</small></a></div></span></span><span class="v-badge__wrapper"><span aria-atomic="true" aria-label="Badge" aria-live="polite" role="status" class="v-badge__badge error" style="bottom:calc(100% - 12px);left:calc(100% - 12px);right:auto;top:auto;">0</span></span></span></div></div> <!----> <div class="col col-12" data-v-145a8bfc data-v-145a8bfc><!----></div></div></div> <!----></div></div></div></div> <div class="d-flex justify-space-between flex-wrap flex-lg-nowrap flex-md-nowrap flex-xl-nowrap flex-sm-nowrap"><nav role="navigation" aria-label="Pagination Navigation" class="w-100"><ul class="v-pagination theme--light"><li><button type="button" aria-label="Previous page" class="v-pagination__navigation v-pagination__navigation--disabled"><i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-left theme--light"></i></button></li><li><button type="button" aria-current="true" aria-label="Current Page, Page 1" class="v-pagination__item v-pagination__item--active primary">1</button></li><li><button type="button" aria-label="Next page" class="v-pagination__navigation v-pagination__navigation--disabled"><i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-right theme--light"></i></button></li></ul></nav> <div class="mx-auto col-sm-2 col-md-3 col-lg-2 col-xl-1 col-6"><div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select"><div class="v-input__control"><div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-8154624" class="v-input__slot"><div class="v-select__slot"><label for="input-8154624" class="v-label v-label--active theme--light" style="left:0px;right:auto;position:absolute;">Кол-во на странице</label><div class="v-select__selections"><div class="v-select__selection v-select__selection--comma">15</div><input id="input-8154624" readonly="readonly" type="text" aria-readonly="false" autocomplete="off"></div><div class="v-input__append-inner"><div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu-down theme--light"></i></div></div><input type="hidden" value="15"></div><div class="v-menu"><!----></div></div><div class="v-text-field__details"><div class="v-messages theme--light"><div class="v-messages__wrapper"></div></div></div></div></div></div></div> <div class="row mt-2"><div class="col col-12"><h2 class="display-1">Похожие обсуждения:</h2></div> <div class="col col-12"><div class="mx-auto v-card v-sheet theme--light"><div role="list" class="v-list v-sheet theme--light v-list--two-line"><!----> <a href="/thread/kak-ispol-zovat-svoistva-komponenta-v-react-js" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">Как использовать свойства компонента в React.js?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/kak-ispol-zovat-svoistva-komponenta-v-svelte" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">Как использовать свойства компонента в Svelte?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/kak-ispol-zovat-vychisliaemye-svoistva-v-vue-js" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">Как использовать вычисляемые свойства в Vue.js?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/kak-ispol-zovat-sostoianie-komponenta-v-vue-js" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">Как использовать состояние компонента в Vue.js?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/kak-ispol-zovat-zhiznennyi-tsikl-komponenta-v-vue-js" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">Как использовать жизненный цикл компонента в Vue.js?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/kak-vyzvat-metod-dochernego-komponenta-v-vue-js" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">Как вызвать метод дочернего компонента в Vue.js?</div></div></a></div></div></div></div></div></div></div></div> <div pages="" class="footer" data-v-600bef70><!----> <footer class="v-footer footer mt-4 v-sheet theme--light" data-v-600bef70><div class="flex xs12 sm12 md6 lg4" data-v-600bef70><h4 class="title text-center" data-v-600bef70> Мы в социальных сетях </h4> <div class="social-section" data-v-600bef70><ul class="text-center pr-6" data-v-600bef70><!----> <li data-v-600bef70><a href="https://twitter.com/dropcoderu" rel="nofollow" target="_blank" class="transparent--text btn-floating btn-tw waves-effect waves-light" data-v-600bef70><i aria-hidden="true" class="v-icon notranslate blue--text text--lighten-2 mdi mdi-twitter theme--light" style="font-size:36px;" data-v-600bef70></i></a></li> <li data-v-600bef70><a href="https://vk.com/dropcoderu" rel="nofollow" target="_blank" class="transparent--text btn-floating btn-vk waves-effect waves-light" data-v-600bef70><i aria-hidden="true" class="v-icon notranslate blue--text text--darken-2 mdi mdi-vk theme--light" style="font-size:36px;" data-v-600bef70></i></a></li> <!----> <!----> <li data-v-600bef70><a href="https://www.instagram.com/dropcode_ru/" rel="nofollow" target="_blank" class="transparent--text btn-floating btn-instagram waves-effect waves-light" data-v-600bef70><i aria-hidden="true" class="v-icon notranslate red--text text--darken-3 mdi mdi-instagram theme--light" style="font-size:36px;" data-v-600bef70></i></a></li></ul></div></div> <!----> <div class="flex xs12 sm12 md6 lg4" data-v-600bef70><div class="about-section white-text mx-auto" data-v-600bef70><h4 class="title text-center" data-v-600bef70>О нас</h4> <ul class="text-center pr-6" data-v-600bef70><li data-v-600bef70><a href="/contact" rel="nofollow" data-v-600bef70>Обратная связь</a></li></ul></div></div> <div class="flex xs12 text-center mt-2" data-v-600bef70><span data-v-600bef70>© 2024 Copyright: dropcode.ru </span> <p class="mb-0" data-v-600bef70> Этот сайт создан на платформе <a href="https://2x2forum.ru" target="_blank" data-v-600bef70>2x2forum.ru</a></p> <p data-v-600bef70> Создайте свой <a href="https://2x2forum.ru" target="_blank" data-v-600bef70>сервис вопросов и ответов</a></p></div></footer> <!----> <!----></div> <!----> <div class="js-scripts"></div></div></div></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB,bC,bD,bE){ai.id=31488;ai.name=aj;ai.messages=2672;ai.threads=1327;ai.meta_title="Java вопросы и ответы";ai.meta_description="Java вопросы и ответы.";ai.children=e;ai.icon="category\u002F1621ef6b-f7b8-472d-81c6-30c240be6613\u002Fjava.png";ai.is_public=c;ai.last_post={id:220603,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003E30dayint\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003EПаблик - это модификатор доступа. Доступа к чему? Методу, классу. Если судить, по тому, что есть возвращаемое значение - доступа к методу. Но судя по сигнатуре вызова, у него должен быть булевский параметр. Правда обычно он бывает не у геттера, который возвращает значение того же типа (булево), а у сеттера, который устанавливает значение поля в объекте truck.\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-ghnw0n46cbd\" language=\"java\"\u003Epublic class Truck {\n private boolean loaded = false;\n\n public void setLoaded(boolean loaded) {\n this.loaded = loaded;\n }\n\n public boolean getLoaded() {\n return loaded;\n }\n\n public static void main(String[] args) {\n Truck truck = new Truck();\n truck.setLoaded(true);\n System.out.println(truck.getLoaded());\n }\n}\n\u003C\u002Fpre\u003E",is_moderated:b,username:"kirillzotkin",user_active:a,created:"2024-04-08T03:37:57Z"};ai.order=a;ai.description=aj;ai.slug="java";ak.id=31489;ak.name=al;ak.messages=4346;ak.threads=2089;ak.meta_title=am;ak.meta_description=am;ak.children=e;ak.icon="category\u002F866d1d6f-c6e4-4386-8c16-96484415a09b\u002Fpython.png";ak.is_public=c;ak.last_post={id:250812,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003El_vinton_l\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003EВ aiogram, начиная с версии 2.x, при использовании стандартных обработчиков, таких как \u003Ccode\u003E@dp.message_handler\u003C\u002Fcode\u003E, вы получаете обработанные данные, такие как объект \u003Ccode\u003EMessage\u003C\u002Fcode\u003E. Однако, чтобы получить исходные данные вебхука в формате JSON (весь запрос от Telegram API), вам нужно самостоятельно обрабатывать запросы к вебхуку. Для этого можно использовать встроенные возможности aiohttp, который является основой aiogram, и перехватывать вебхуки на уровне HTTP-запросов. Вот пример, как это можно сделать:\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EМой пример\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-0eeijnu89fwk\" language=\"python\"\u003Efrom aiogram import Bot, Dispatcher, types\nfrom aiogram.utils.executor import start_webhook\nfrom aiohttp import web\nimport json\n\n\nAPI_TOKEN = 'YOUR_BOT_API_TOKEN'\n\n\nWEBHOOK_HOST = 'https:\u002F\u002Fsite.ru'\nWEBHOOK_PATH = '\u002Fwebhook'\nWEBHOOK_URL = f"{WEBHOOK_HOST}{WEBHOOK_PATH}"\n\n\nbot = Bot(token=API_TOKEN)\ndp = Dispatcher(bot)\n\n\n# Обработчик для команды start\n@dp.message_handler(commands=['start'])\nasync def start(message: types.Message):\n await message.reply("Привет!!!")\n\n\n# Получаем сырой JSON запрос от Telegram и выводим его\nasync def handle_webhook(request):\n raw_data = await request.text() # Получаем сырые данные запроса\n print("Полученный вебхук (сырой JSON):")\n print(raw_data)\n\n\n # Обработка JSON данных\n update = types.Update(**json.loads(raw_data))\n \n # Передача обработанных данных в aiogram\n Dispatcher.set_current(dp)\n Bot.set_current(dp.bot)\n await dp.process_update(update)\n \n return web.Response()\n\n\n# Основная конфигурация для вебхуков\nasync def on_startup(app):\n await bot.set_webhook(WEBHOOK_URL)\n\n\nasync def on_shutdown(app):\n await bot.delete_webhook()\n\n\n# Настройка веб-приложения aiohttp\napp = web.Application()\napp.router.add_post(WEBHOOK_PATH, handle_webhook)\n\n\nif __name__ == '__main__':\n start_webhook(\n dispatcher=dp,\n webhook_path=WEBHOOK_PATH,\n on_startup=on_startup,\n on_shutdown=on_shutdown,\n skip_updates=True,\n host='localhost', # Укажите ваш хост\n port=3000 # Укажите ваш порт\n )\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E",is_moderated:b,username:"jaren",user_active:a,created:"2024-09-21T23:41:25Z"};ak.order=a;ak.description=al;ak.slug="python";an.id=G;an.name=k;an.messages=4919;an.threads=2565;an.meta_title=ao;an.meta_description=ao;an.children=e;an.icon="category\u002F8eab25a4-2f7c-4c2b-a59c-4f64eed0c6e8\u002Fjavascript-logo.png";an.is_public=c;an.last_post={id:199491,message:"\u003Cp\u003E\u003Cspan style=\"color: rgb(0, 0, 0);\"\u003EИщу напарника для совместного изучения JavaScript и React. Ранее изучала HTML и CSS, и теперь хочу глубже погрузиться в разработку с использованием JavaScript и React. Было бы здорово обсуждать темы, вместе решать задачи, проходить тесты и помогать друг другу.\u003C\u002Fspan\u003E\u003C\u002Fp\u003E",is_moderated:b,username:"Ani",user_active:a,created:"2024-10-25T17:38:02Z"};an.order=a;an.description=k;an.slug=Y;ap.id=31491;ap.name=aq;ap.messages=5405;ap.threads=2758;ap.meta_title=ar;ap.meta_description=ar;ap.children=e;ap.icon="category\u002Fb7a4934c-ce2f-4f7c-bc9a-989cad61ea24\u002Fphp.png";ap.is_public=c;ap.last_post={id:250231,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Eterrence\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EЕсли необходимо изменить часовой пояс непосредственно в коде WordPress, можно воспользоваться функцией \u003Ccode\u003Edate_default_timezone_set\u003C\u002Fcode\u003E. Для этого нужно добавить следующий код в файл \u003Ccode\u003Efunctions.php\u003C\u002Fcode\u003E вашей темы:\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-qn97023\"\u003Edate_default_timezone_set('Europe\u002FMoscow'); \u002F\u002F Укажите название нужного вам часового пояса\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EЗамените \u003Ccode\u003E'Europe\u002FMoscow'\u003C\u002Fcode\u003E на нужный вам часовой пояс из списка поддерживаемых PHP часовых поясов (например, 'America\u002FNew_York', 'Asia\u002FTokyo' и т.д.).\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EПомните, что изменение часового пояса в коде самым способом может негативно сказаться на дальнейшем обновлении WordPress или темы, поэтому рекомендуется использовать первый способ изменения часового пояса через админ-панель.\u003C\u002Fp\u003E",is_moderated:b,username:"aubree",user_active:a,created:"2024-09-13T09:13:28Z"};ap.order=a;ap.description=aq;ap.slug="php";as.id=31492;as.name=at;as.messages=2072;as.threads=1028;as.meta_title=au;as.meta_description=au;as.children=e;as.icon="category\u002Fd8125754-b506-4b5e-a45d-923c563d225b\u002Fsql.png";as.is_public=c;as.last_post={id:249907,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Eguillermo\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EДополнительно хочу отметить, что при работе с датами в SQLite следует убедиться, что колонки с датами имеют правильный тип данных (например, TEXT, DATE, DATETIME), чтобы обеспечить корректное сравнение и фильтрацию значений дат. Кроме того, задавая даты в запросах, следует учитывать формат дат, который может отличаться в зависимости от стандартов настройки языка и региональных настроек базы данных SQLite.\u003C\u002Fp\u003E",is_moderated:b,username:"stephania",user_active:a,created:"2024-09-07T16:53:24Z"};as.order=a;as.description=at;as.slug="sql";av.id=31493;av.name=aw;av.messages=591;av.threads=307;av.meta_title=ax;av.meta_description=ax;av.children=e;av.icon="category\u002F51b34da5-db3c-4ca2-89e1-c115704076e7\u002Fgo2.png";av.is_public=c;av.last_post={id:250029,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Eelda\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EПомимо этих двух типов, Golang также предоставляет много других удобных функций и методов для работы с символами, так что разработчики могут легко манипулировать строками и символами в своих программах.\u003C\u002Fp\u003E",is_moderated:b,username:"fred",user_active:a,created:"2024-09-10T14:48:27Z"};av.order=a;av.description=aw;av.slug="golang";ay.id=31494;ay.name=az;ay.messages=747;ay.threads=355;ay.meta_title=aA;ay.meta_description=aA;ay.children=e;ay.icon="category\u002F4b24b2ce-28e4-4993-9951-97f96b7532c1\u002Fc.png";ay.is_public=c;ay.last_post={id:250214,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Ejaren\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EАльтернативным способом для работы с PNG-файлами в C++ является использование библиотеки OpenCV, которая обеспечивает удобный доступ к метаданным изображения. Вот пример, демонстрирующий как прочитать метки PNG-файла с использованием OpenCV:\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-8kgv7cf\"\u003E#include <opencv2\u002Fopencv.hpp>\n\nint main() {\n \u002F\u002F Загрузка PNG-файла с метаданными\n cv::Mat image = cv::imread("example.png", cv::IMREAD_UNCHANGED);\n\n if (image.empty()) {\n std::cerr << "Unable to open PNG file." << std::endl;\n return 1;\n }\n\n \u002F\u002F Получение метаданных изображения\n cv::String keyword, text;\n if (image.channels() == 4 && !image.empty() && image.type() == CV_8UC4) {\n cv::Vec4b metadata = image.at<cv::Vec4b>(0, 0);\n keyword = cv::String((char*)&metadata[0]);\n text = cv::String((char*)&metadata[1]);\n }\n \n \u002F\u002F Вывод метаданных\n std::cout << "Keyword: " << keyword << std::endl;\n std::cout << "Text: " << text << std::endl;\n\n return 0;\n}\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EПомните, что в этом примере предполагается, что метаданные PNG-файла хранятся в первом пикселе изображения. Пожалуйста, убедитесь, что ваш PNG-файл содержит метаданные в соответствии с ожидаемым форматом.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EКакой метод выбрать, зависит от ваших предпочтений и особенностей проекта.\u003C\u002Fp\u003E",is_moderated:b,username:"rodger.botsford",user_active:a,created:"2024-09-13T06:12:30Z"};ay.order=a;ay.description=az;ay.slug="c-c";aB.id=31496;aB.name=aC;aB.messages=1566;aB.threads=752;aB.meta_title=aD;aB.meta_description=aD;aB.children=e;aB.icon="category\u002F73c93094-c81c-4921-8065-75521659ab82\u002Fhtmlcss.png";aB.is_public=c;aB.last_post={id:243726,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Ecamren\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EУчитывая, что поддержка Java апплетов устарела и была исключена из большинства современных браузеров, ниже приведен пример встраивания апплета Java на HTML-страницу (для демонстрационных целей).\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-du2lu3j\"\u003E<!DOCTYPE html>\n<html>\n<head>\n <title>My Java Applet<\u002Ftitle>\n<\u002Fhead>\n<body>\n <applet code="MyApplet.class" width="200" height="200">\n Your browser does not support Java.\n <\u002Fapplet>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EПримечание: Замените \u003Ccode\u003EMyApplet.class\u003C\u002Fcode\u003E на имя вашего скомпилированного апплета (без расширения .class).Убедитесь, что HTML-файл и файл с апплетом находятся в одной директории.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EКак уже упоминалось выше, использование Java апплетов не рекомендуется из-за проблем с безопасностью и устаревшей технологией. Рекомендуется рассмотреть другие современные альтернативы, такие как JavaScript и фреймворки вроде React или Angular для разработки веб-приложений.\u003C\u002Fp\u003E",is_moderated:b,username:"jakayla",user_active:a,created:"2024-07-13T13:50:35Z"};aB.order=a;aB.description=aC;aB.slug="html-css";aE.id=31498;aE.name=aF;aE.messages=294;aE.threads=147;aE.meta_title=aG;aE.meta_description=aG;aE.children=e;aE.icon="category\u002F5b69088a-4c7a-47b1-98a3-4dd16ee6893d\u002Fruby2.png";aE.is_public=c;aE.last_post={id:232395,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Ejerad.kuphal\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EЭтот ответ содержит отличное описание того, как использовать шаблоны и частичные виды в Ruby on Rails. Они являются важной частью разработки сайтов на Rails и позволяют эффективно организовывать код и уменьшать его дублирование. Шаблоны и частичные виды помогают создать чистый и модульный код, что делает проект более легким в сопровождении и развитии. Если у вас возникнут вопросы или понадобится дополнительная информация по данной теме, не стесняйтесь задавать их.\u003C\u002Fp\u003E",is_moderated:b,username:"lilla.herman",user_active:a,created:"2024-05-27T10:13:11Z"};aE.order=a;aE.description=aF;aE.slug="ruby";aH.id=31500;aH.name=aI;aH.messages=184;aH.threads=93;aH.meta_title=aJ;aH.meta_description=aJ;aH.children=e;aH.icon="category\u002Fd2b52409-e1c9-4577-a428-3b262ae72712\u002Fswift.png";aH.is_public=c;aH.last_post={id:196130,message:"\u003Cp\u003EВсех приветствую,\u003C\u002Fp\u003E\u003Cp\u003EИщу молодого программиста с хорошим социальным ресурсом для реализации двух проектов, один рассчитан на мобильную разработку, другой чуть сложнее и обширнее.\u003C\u002Fp\u003E\u003Cp\u003EПо проектам:\u003C\u002Fp\u003E\u003Cp\u003E1. Мобильный, приложение для донатов\u003C\u002Fp\u003E\u003Cp\u003E2. Инструмент для облегчения работы юристам и распространения качественных юридических услуг по низким ценам, с интегрированной нейросетью. \u003C\u002Fp\u003E\u003Cp\u003EПодробности могу описать в личных сообщениях\u003C\u002Fp\u003E\u003Cp\u003EТг: @Ggg_kkkk\u003C\u002Fp\u003E\u003Cp\u003EЖелательно из МСК\u003C\u002Fp\u003E",is_moderated:b,username:"6kardinal9",user_active:a,created:"2024-09-21T00:05:42Z"};aH.order=a;aH.description=aI;aH.slug="swift";aK.id=36176;aK.name=aL;aK.messages=8356;aK.threads=4173;aK.meta_title=aM;aK.meta_description=aM;aK.children=e;aK.icon="category\u002Fee67a859-941e-4b6e-97b9-9af8dba0270e\u002Fic-2dev.png";aK.is_public=c;aK.last_post={id:199605,message:"\u003Cp\u003EВсем привет.\u003C\u002Fp\u003E\u003Cp\u003EПишу приложение на c# windows forms с использованием IronPython и столкнулся с проблемой: я не могу импортировать модуль random в питон файл. \u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-p0h6qkdkh2\" language=\"plaintext\"\u003Esys.path.append(r'C:\\Program Files (x86)\\\\IronPython 2.7\\Lib')\nimport random\nOUT = random.randint(0,9)\n\u003C\u002Fpre\u003E\u003Cp\u003EПробовал что-то подобное, но не получилось. У меня даже папки никакой нет по этому пути. В общем, я в тупике, помогите пожалуйста.\u003C\u002Fp\u003E",is_moderated:b,username:"Гога",user_active:a,created:"2024-10-27T12:28:07Z"};aK.order=a;aK.description=aL;aK.slug="drugie";return {layout:X,data:[{sanitizedMessage:h,thread:{id:109815,name:h,message:"\u003Cp\u003EКак использовать свойства компонента в Vue.js?\u003C\u002Fp\u003E",formatted_message:d,tags:["2x2forum"],category:{id:G,name:k,messages:a,threads:a,meta_title:d,meta_description:d,children:e,icon:d,is_public:c,order:a,description:k,slug:Y},category_id:G,slug:H,likes:47,dislikes:a,is_closed:c,is_pinned:c,is_moderated:b,username:"bernardo_nolan",user_active:f,role:g,user_avatar:"avatar\u002Fbernardo_nolan\u002F110481341.jpg",created:"2023-03-13T20:28:46Z"},relatedThreads:[{id:109812,title:Z,text:Z,avatar:"avatar\u002Fjaylen.trantow\u002F199992586.jpg",role:g,slug:"kak-ispol-zovat-svoistva-komponenta-v-react-js",username:"jaylen.trantow",created:"2023-03-13T20:24:07Z"},{id:109658,title:_,text:_,avatar:"avatar\u002Fjeromy_ruecker\u002F37-2 (1).jpg",role:g,slug:"kak-ispol-zovat-svoistva-komponenta-v-svelte",username:"jeromy_ruecker",created:"2023-03-13T12:21:32Z"},{id:110586,title:$,text:$,avatar:"avatar\u002Folen.shanahan\u002Fanimal0014.jpg",role:g,slug:"kak-ispol-zovat-vychisliaemye-svoistva-v-vue-js",username:"olen.shanahan",created:"2023-03-15T07:38:39Z"},{id:109960,title:aa,text:aa,avatar:"avatar\u002Fjorge\u002Fpic11.jpg",role:g,slug:"kak-ispol-zovat-sostoianie-komponenta-v-vue-js",username:"jorge",created:"2023-03-14T06:28:36Z"},{id:111139,title:ab,text:ab,avatar:"avatar\u002Fvladimir\u002Favatar-539-s.jpg",role:g,slug:"kak-ispol-zovat-zhiznennyi-tsikl-komponenta-v-vue-js",username:"vladimir",created:"2023-03-16T08:49:21Z"},{id:61845,title:ac,text:ac,avatar:ad,role:g,slug:"kak-vyzvat-metod-dochernego-komponenta-v-vue-js",username:ae,created:"2022-04-27T01:09:43Z"}],socialSettings:{id:1383,size:a,facebook:b,vk:b,ok:b,linkedin:b,telegram:b,whatsapp:b,pocket:c,twitter:b,active:b},page:f,totals:f,postsTotal:2,posts:[{id:143668,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Ebernardo_nolan\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EВ Vue.js свойства компонента используются для передачи данных из родительского компонента в дочерний компонент. Для определения свойств компонента в Vue.js используется объект \u003Ccode\u003Eprops\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EНапример, чтобы определить свойство \u003Ccode\u003Emessage\u003C\u002Fcode\u003E, которое будет использоваться в дочернем компоненте, можно написать следующий код в родительском компоненте:\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-88t99un\" language=\"html\"\u003E<template>\n <div>\n <child-component :message="parentMessage"><\u002Fchild-component>\n <\u002Fdiv>\n<\u002Ftemplate>\n\n<script>\nimport ChildComponent from '.\u002FChildComponent.vue'\n\nexport default {\n components: {\n ChildComponent\n },\n data() {\n return {\n parentMessage: 'Hello from parent'\n }\n }\n}\n<\u002Fscript>\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EВ этом примере мы передаем свойство \u003Ccode\u003Emessage\u003C\u002Fcode\u003E с именем \u003Ccode\u003EparentMessage\u003C\u002Fcode\u003E из родительского компонента в дочерний компонент \u003Ccode\u003EChildComponent\u003C\u002Fcode\u003E. В дочернем компоненте \u003Ccode\u003EChildComponent\u003C\u002Fcode\u003E мы можем использовать это свойство, используя его имя, как показано ниже:\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-nk4kg9r\" language=\"html\"\u003E<template>\n <div>\n {{ message }}\n <\u002Fdiv>\n<\u002Ftemplate>\n\n<script>\nexport default {\n props: {\n message: String\n }\n}\n<\u002Fscript>\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EОбратите внимание, что в объекте \u003Ccode\u003Eprops\u003C\u002Fcode\u003E мы определяем имя свойства (\u003Ccode\u003Emessage\u003C\u002Fcode\u003E) и его тип (\u003Ccode\u003EString\u003C\u002Fcode\u003E). В дочернем компоненте мы используем \u003Ccode\u003E{{ message }}\u003C\u002Fcode\u003E для отображения значения свойства \u003Ccode\u003Emessage\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EМожно также задавать значения по умолчанию для свойств, указав их в объекте \u003Ccode\u003Eprops\u003C\u002Fcode\u003E с помощью \u003Ccode\u003Edefault\u003C\u002Fcode\u003E:\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-4wlh10x\" language=\"html\"\u003E<template>\n <div>\n {{ message }}\n <\u002Fdiv>\n<\u002Ftemplate>\n\n<script>\nexport default {\n props: {\n message: {\n type: String,\n default: 'Default message'\n }\n }\n}\n<\u002Fscript>\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EТеперь, если свойство \u003Ccode\u003Emessage\u003C\u002Fcode\u003E не будет передано из родительского компонента, вместо него будет использоваться значение по умолчанию \u003Ccode\u003EDefault message\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\u003Cp\u003E\n\u003C\u002Fp\u003E",formatted_message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Ebernardo_nolan\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EВ Vue.js свойства компонента используются для передачи данных из родительского компонента в дочерний компонент. Для определения свойств компонента в Vue.js используется объект \u003Ccode\u003Eprops\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EНапример, чтобы определить свойство \u003Ccode\u003Emessage\u003C\u002Fcode\u003E, которое будет использоваться в дочернем компоненте, можно написать следующий код в родительском компоненте:\u003C\u002Fp\u003E\u003Cdiv style=\"color:#f8f8f2;background-color:#272822;\"\u003E\n\u003Ctable style=\"border-spacing:0;padding:0;margin:0;border:0;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 1\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 2\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 3\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 4\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 5\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 6\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 7\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 8\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 9\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E10\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E11\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E12\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E13\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E14\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E15\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E16\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E17\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E18\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E19\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E20\n\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\n\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;;width:100%\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E<\u003Cspan style=\"color:#f92672\"\u003Etemplate\u003C\u002Fspan\u003E>\n <\u003Cspan style=\"color:#f92672\"\u003Ediv\u003C\u002Fspan\u003E>\n <\u003Cspan style=\"color:#f92672\"\u003Echild-component\u003C\u002Fspan\u003E \u003Cspan style=\"color:#a6e22e\"\u003E:message\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E=\u003C\u002Fspan\u003E\u003Cspan style=\"color:#e6db74\"\u003E"parentMessage"\u003C\u002Fspan\u003E><\u002F\u003Cspan style=\"color:#f92672\"\u003Echild-component\u003C\u002Fspan\u003E>\n <\u002F\u003Cspan style=\"color:#f92672\"\u003Ediv\u003C\u002Fspan\u003E>\n<\u002F\u003Cspan style=\"color:#f92672\"\u003Etemplate\u003C\u002Fspan\u003E>\n\n<\u003Cspan style=\"color:#f92672\"\u003Escript\u003C\u002Fspan\u003E>\n\u003Cspan style=\"color:#66d9ef\"\u003Eimport\u003C\u002Fspan\u003E \u003Cspan style=\"color:#a6e22e\"\u003EChildComponent\u003C\u002Fspan\u003E \u003Cspan style=\"color:#a6e22e\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan style=\"color:#e6db74\"\u003E'.\u002FChildComponent.vue'\u003C\u002Fspan\u003E\n\n\u003Cspan style=\"color:#66d9ef\"\u003Eexport\u003C\u002Fspan\u003E \u003Cspan style=\"color:#66d9ef\"\u003Edefault\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#a6e22e\"\u003Ecomponents\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#a6e22e\"\u003EChildComponent\u003C\u002Fspan\u003E\n },\n \u003Cspan style=\"color:#a6e22e\"\u003Edata\u003C\u002Fspan\u003E() {\n \u003Cspan style=\"color:#66d9ef\"\u003Ereturn\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#a6e22e\"\u003EparentMessage\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E \u003Cspan style=\"color:#e6db74\"\u003E'Hello from parent'\u003C\u002Fspan\u003E\n }\n }\n}\n<\u002F\u003Cspan style=\"color:#f92672\"\u003Escript\u003C\u002Fspan\u003E>\n\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\u003C\u002Ftr\u003E\u003C\u002Ftbody\u003E\u003C\u002Ftable\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EВ этом примере мы передаем свойство \u003Ccode\u003Emessage\u003C\u002Fcode\u003E с именем \u003Ccode\u003EparentMessage\u003C\u002Fcode\u003E из родительского компонента в дочерний компонент \u003Ccode\u003EChildComponent\u003C\u002Fcode\u003E. В дочернем компоненте \u003Ccode\u003EChildComponent\u003C\u002Fcode\u003E мы можем использовать это свойство, используя его имя, как показано ниже:\u003C\u002Fp\u003E\u003Cdiv style=\"color:#f8f8f2;background-color:#272822;\"\u003E\n\u003Ctable style=\"border-spacing:0;padding:0;margin:0;border:0;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 1\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 2\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 3\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 4\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 5\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 6\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 7\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 8\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 9\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E10\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E11\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E12\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E13\n\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\n\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;;width:100%\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E<\u003Cspan style=\"color:#f92672\"\u003Etemplate\u003C\u002Fspan\u003E>\n <\u003Cspan style=\"color:#f92672\"\u003Ediv\u003C\u002Fspan\u003E>\n {{ message }}\n <\u002F\u003Cspan style=\"color:#f92672\"\u003Ediv\u003C\u002Fspan\u003E>\n<\u002F\u003Cspan style=\"color:#f92672\"\u003Etemplate\u003C\u002Fspan\u003E>\n\n<\u003Cspan style=\"color:#f92672\"\u003Escript\u003C\u002Fspan\u003E>\n\u003Cspan style=\"color:#66d9ef\"\u003Eexport\u003C\u002Fspan\u003E \u003Cspan style=\"color:#66d9ef\"\u003Edefault\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#a6e22e\"\u003Eprops\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#a6e22e\"\u003Emessage\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E String\n }\n}\n<\u002F\u003Cspan style=\"color:#f92672\"\u003Escript\u003C\u002Fspan\u003E>\n\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\u003C\u002Ftr\u003E\u003C\u002Ftbody\u003E\u003C\u002Ftable\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EОбратите внимание, что в объекте \u003Ccode\u003Eprops\u003C\u002Fcode\u003E мы определяем имя свойства (\u003Ccode\u003Emessage\u003C\u002Fcode\u003E) и его тип (\u003Ccode\u003EString\u003C\u002Fcode\u003E). В дочернем компоненте мы используем \u003Ccode\u003E{{ message }}\u003C\u002Fcode\u003E для отображения значения свойства \u003Ccode\u003Emessage\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EМожно также задавать значения по умолчанию для свойств, указав их в объекте \u003Ccode\u003Eprops\u003C\u002Fcode\u003E с помощью \u003Ccode\u003Edefault\u003C\u002Fcode\u003E:\u003C\u002Fp\u003E\u003Cdiv style=\"color:#f8f8f2;background-color:#272822;\"\u003E\n\u003Ctable style=\"border-spacing:0;padding:0;margin:0;border:0;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 1\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 2\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 3\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 4\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 5\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 6\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 7\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 8\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 9\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E10\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E11\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E12\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E13\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E14\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E15\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E16\n\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\n\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;;width:100%\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E<\u003Cspan style=\"color:#f92672\"\u003Etemplate\u003C\u002Fspan\u003E>\n <\u003Cspan style=\"color:#f92672\"\u003Ediv\u003C\u002Fspan\u003E>\n {{ message }}\n <\u002F\u003Cspan style=\"color:#f92672\"\u003Ediv\u003C\u002Fspan\u003E>\n<\u002F\u003Cspan style=\"color:#f92672\"\u003Etemplate\u003C\u002Fspan\u003E>\n\n<\u003Cspan style=\"color:#f92672\"\u003Escript\u003C\u002Fspan\u003E>\n\u003Cspan style=\"color:#66d9ef\"\u003Eexport\u003C\u002Fspan\u003E \u003Cspan style=\"color:#66d9ef\"\u003Edefault\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#a6e22e\"\u003Eprops\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#a6e22e\"\u003Emessage\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#a6e22e\"\u003Etype\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E String,\n \u003Cspan style=\"color:#66d9ef\"\u003Edefault\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E \u003Cspan style=\"color:#e6db74\"\u003E'Default message'\u003C\u002Fspan\u003E\n }\n }\n}\n<\u002F\u003Cspan style=\"color:#f92672\"\u003Escript\u003C\u002Fspan\u003E>\n\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\u003C\u002Ftr\u003E\u003C\u002Ftbody\u003E\u003C\u002Ftable\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EТеперь, если свойство \u003Ccode\u003Emessage\u003C\u002Fcode\u003E не будет передано из родительского компонента, вместо него будет использоваться значение по умолчанию \u003Ccode\u003EDefault message\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\u003Cp\u003E\n\u003C\u002Fp\u003E",is_moderated:b,likes:f,dislikes:a,thread_title:h,thread_slug:H,username:ae,user_avatar:ad,user_active:f,role:g,role_logo:d,created:"2023-03-15T03:45:21Z"},{id:220937,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Ebernardo_nolan\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EДополнительно, помимо передачи данных из родительского компонента в дочерний через свойства, в Vue.js свойства компонента также можно использовать для валидации передаваемых данных.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EНапример, допустим, вы хотите, чтобы свойство message было обязательным и имело тип строка. В данном случае, вы можете определить валидацию для свойства message в объекте props следующим образом:\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-netdo17\"\u003Eprops: {\n message: {\n type: String,\n required: true\n }\n}\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EТеперь, если родительский компонент не передаст значение для свойства message или передаст не строку, будет сгенерирована ошибка в консоли браузера.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EТаким образом, свойства компонента в Vue.js не только используются для передачи данных, но и для обеспечения безопасности и валидации передаваемых данных между компонентами.\u003C\u002Fp\u003E",formatted_message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Ebernardo_nolan\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EДополнительно, помимо передачи данных из родительского компонента в дочерний через свойства, в Vue.js свойства компонента также можно использовать для валидации передаваемых данных.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EНапример, допустим, вы хотите, чтобы свойство message было обязательным и имело тип строка. В данном случае, вы можете определить валидацию для свойства message в объекте props следующим образом:\u003C\u002Fp\u003E\u003Cdiv style=\"color:#f8f8f2;background-color:#272822;\"\u003E\n\u003Ctable style=\"border-spacing:0;padding:0;margin:0;border:0;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E1\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E2\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E3\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E4\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E5\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E6\n\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\n\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;;width:100%\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003Eprops: {\n message: {\n type: String,\n required: true\n }\n}\n\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\u003C\u002Ftr\u003E\u003C\u002Ftbody\u003E\u003C\u002Ftable\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EТеперь, если родительский компонент не передаст значение для свойства message или передаст не строку, будет сгенерирована ошибка в консоли браузера.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EТаким образом, свойства компонента в Vue.js не только используются для передачи данных, но и для обеспечения безопасности и валидации передаваемых данных между компонентами.\u003C\u002Fp\u003E",is_moderated:b,likes:a,dislikes:a,thread_title:h,thread_slug:H,username:"rebekah",user_avatar:"avatar\u002Frebekah\u002F647189495.jpg",user_active:f,role:g,role_logo:d,created:"2024-04-09T00:35:28Z"}]}],fetch:{},error:e,state:{loading:a,settings:{id:6323,name:I,domain:"dropcode.ru",port:80,plan:f,plan_name:"free",footer_code:"\u003C!-- Yandex.Metrika counter --\u003E\n\u003Cscript type=\"text\u002Fjavascript\" \u003E\n (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};\n m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})\n (window, document, \"script\", \"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js\", \"ym\");\n\n ym(88099648, \"init\", {\n clickmap:true,\n trackLinks:true,\n accurateTrackBounce:true\n });\n\u003C\u002Fscript\u003E\n\u003Cnoscript\u003E\u003Cdiv\u003E\u003Cimg src=\"https:\u002F\u002Fmc.yandex.ru\u002Fwatch\u002F88099648\" style=\"position:absolute; left:-9999px;\" alt=\"\" \u002F\u003E\u003C\u002Fdiv\u003E\u003C\u002Fnoscript\u003E\n\u003C!-- \u002FYandex.Metrika counter --\u003E\n\n\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-4833888168110763\"\n crossorigin=\"anonymous\"\u003E\u003C\u002Fscript\u003E\n\n\u003C!-- Yandex.RTB --\u003E\n\u003Cscript\u003Ewindow.yaContextCb=window.yaContextCb||[]\u003C\u002Fscript\u003E\n\u003Cscript src=\"https:\u002F\u002Fyandex.ru\u002Fads\u002Fsystem\u002Fcontext.js\" async\u003E\u003C\u002Fscript\u003E\n\u003Cscript\u003E\n window.yaContextCb.push(() =\u003E {\n if (Ya.Context.AdvManager.getPlatform() === 'desktop') {\n \u002F\u002F вызов полноэкранного блока для десктопной версии\n Ya.Context.AdvManager.render({\n blockId: 'R-A-1670952-6',\n type: 'fullscreen',\n platform: 'desktop',\n });\n } else {\n \u002F\u002F вызов полноэкранного блока для мобильной версии\n Ya.Context.AdvManager.render({\n blockId: 'R-A-1670952-5',\n type: 'fullscreen',\n platform: 'touch',\n });\n }\n });\n\u003C\u002Fscript\u003E",robots_txt:"User-agent: *\nDisallow: \u002Fsearch\nDisallow: \u002Fadmin\nDisallow: \u002Fprofile\nDisallow: \u002Flogin\nDisallow: \u002Fregister\n\nSitemap: https:\u002F\u002Fdropcode.ru\u002Fsitemap.xml",locale:"ru",add_source:a,allow_likes:f,add_watermark:f,add_watermark_position:3,hash:"f583ffc5-8cec-409c-8843-65dc51f6aa2f",default_role:af,allow_hash_tags:f,add_source_text:d,scrollable_pagination:a,meta_title:I,blog_active:c,favicon_png:"\u002Ffavicon.png",favicon_ico:d,custom_css:".forum-text.ql-viewer div{\n border-radius: 5px;\n}",meta_description:ag,description:ag,logo:"logo\u002F0088a88d555.png",is_related_thread:f,related_thread:ah,notify_on_moderation:b,activation:"email",vkontakte:"https:\u002F\u002Fvk.com\u002Fdropcoderu",twitter:"https:\u002F\u002Ftwitter.com\u002Fdropcoderu",instagram:"https:\u002F\u002Fwww.instagram.com\u002Fdropcode_ru\u002F"},layout:{id:6400,is_dark:a,name:X,background_full:c,code_theme:"monokai",page_transition:"fade",background:d,background_color:d,text_color:d,text_font_family:"Roboto",primary_color:J,secondary_color:s,accent_color:s,info_color:s,success_color:s,error_color:J,warning_color:J},social_providers:{google:b,facebook:b,github:b},menus:[],showAd:c,darkMode:c,isFooterVisible:c,cdnUrl:"https:\u002F\u002Fforum-static.fra1.cdn.digitaloceanspaces.com",metaOg:{title:h,url:"https:\u002F\u002Fdropcode.ru\u002Fthread\u002Fkak-ispol-zovat-svoistva-komponenta-v-vue-js",type:d,image:d,description:h,site_name:I},itemsPerPage:15,ad:[{id:535,name:"Посты",css_selector:d,position:8,one_time:b,show_every:f,code:"\u003Cscript\u003Ewindow.yaContextCb=window.yaContextCb||[]\u003C\u002Fscript\u003E\n\u003C!-- Yandex.RTB R-A-1670952-1 --\u003E\n\u003Cdiv id=\"yandex_rtb_R-A-1670952-1\"\u003E\u003C\u002Fdiv\u003E\n\u003Cscript\u003Ewindow.yaContextCb.push(()=\u003E{\n Ya.Context.AdvManager.render({\n renderTo: 'yandex_rtb_R-A-1670952-1',\n blockId: 'R-A-1670952-1'\n })\n})\u003C\u002Fscript\u003E",active:b,free:c},{id:536,name:"Под меню",css_selector:d,position:11,one_time:c,show_every:a,code:"\u003Cscript\u003Ewindow.yaContextCb=window.yaContextCb||[]\u003C\u002Fscript\u003E\n\u003C!-- Yandex.RTB R-A-1670952-2 --\u003E\n\u003Cdiv id=\"yandex_rtb_R-A-1670952-2\"\u003E\u003C\u002Fdiv\u003E\n\u003Cscript\u003Ewindow.yaContextCb.push(()=\u003E{\n Ya.Context.AdvManager.render({\n renderTo: 'yandex_rtb_R-A-1670952-2',\n blockId: 'R-A-1670952-2'\n })\n})\u003C\u002Fscript\u003E",active:b,free:c},{id:537,name:"Ветка",css_selector:d,position:7,one_time:b,show_every:ah,code:"\u003Cscript\u003Ewindow.yaContextCb=window.yaContextCb||[]\u003C\u002Fscript\u003E\n\u003C!-- Yandex.RTB R-A-1670952-3 --\u003E\n\u003Cdiv id=\"yandex_rtb_R-A-1670952-3-[__index__]\"\u003E\u003C\u002Fdiv\u003E\n\u003Cscript\u003Ewindow.yaContextCb.push(()=\u003E{\n Ya.Context.AdvManager.render({\n renderTo: 'yandex_rtb_R-A-1670952-3-[__index__]',\n blockId: 'R-A-1670952-3',\n pageNumber: [__index__],\n })\n})\u003C\u002Fscript\u003E",active:b,free:c}],profileStats:{fetched:c,personalMessages:a},stats:{fetched:c,threads:a,posts:a},breadcrumbs:[{text:K,disabled:c,href:L},{text:k,disabled:c,href:"\u002Fforum\u002Fjavascript"},{text:h,disabled:b}],categories:[ai,ak,an,ap,as,av,ay,aB,aE,aH,aK],categoriesWithChildren:[ai,ak,an,ap,as,av,ay,aB,aE,aH,aK],roles:[{code:af,logo:d,name:g},{code:"ROLE_MODERATOR",logo:d,name:aN},{code:"ROLE_ADMIN",logo:d,name:"Администратор"}],i18n:{routeParams:{}},auth:{user:e,loggedIn:c,strategy:"local"}},serverRendered:b,routePath:"\u002Fthread\u002Fkak-ispol-zovat-svoistva-komponenta-v-vue-js",config:{_app:{basePath:L,assetsPath:L,cdnURL:"https:\u002F\u002Fpub-1e27250373774d6ca37239bbf5810b5c.r2.dev\u002Fassets\u002F0.3\u002F"}},__i18n:{langs:{ru:{common:{common_badge_blog:"блог",common_badge_post:"форум",show_more:"Развернуть",answers:"Нет ответов | {n} ответ | {n} ответа | {n} ответов",likes:"Никому не нравится | 1 пользователю нравится | {count} пользователям нравится",dislikes:"Всем нравится | 1 пользователю не нравится | {count} пользователям не нравится",show_less:"Свернуть",in_category:"в категории: ",by:"от",go_back:"Вернуться назад",go_home_page:"Вернуться на главную",count_best_answers:"Лучших ответов",max_tag_reached:"Достигнуто максиммальное количество тегов",our_privacy:l,about:aO,got_it:"Понятно",cookie_text:"Мы используем файлы cookie. Нажимая \"Понятно\" или продолжая пользоваться сайтов, Вы соглашаетесь с условиями использования.",search_ask_question:"Хотите создать сообщение?",signature:aP,member_from:"В комьюнити уже",last_seen:"Был на сайте",user_not_active:"Пользователь удален",author_marked_as_best:M,sidebar_under_menu:"Левая панель под меню",check_internet_connection:"Нет доступа к интернету! Проверьте соединение с интернет.",common_badge_page:"страница",no_transition:"Стандартный переход",mail_services:"Почтовые сервисы",free_files:"Текущий план имеет лимит 10 файлов",main_top_ad:"На всех страницах вверху",main_bottom_ad:"На всех страницах внизу",confirm_email_text:"Мы только что отправили письмо на Ваш Email с кодом подтверждения. Вставьте код из Email в поле ниже.",blog_in_category_ad:"Реклама в категориях блога",blog_post_top_ad:"Реклама в начале статьи",blog_post_bottom_ad:"Реклама в конце статьи",blog_in_post_ad:"Реклама в статье",forum_in_thread_ad:"Реклама в ветке форума",forum_in_post_ad:"Реклама на форуме среди постов",sliding_ad:"Выезжающий блок на всех страницах",page_ad:"Реклама на странице",site_is_not_ready:"Ваш сайт еще не создан",thanks_choosing_us:"Спасибо, что выбрали нашу платформу",register_site_first:"Вам необходимо зарегистрировать сайт на",how_to_create_text:"Если у Вас возникнут вопросы или нужна будет помощь или поддержка - Вы всегда можете рассчитывать на нас! Свяжитесь с нами через форму обратной связи или на",create_forum:"Создать форум",create_forum_free:"форум бесплатно",create_forum_free_text:aQ,create_qa_free_text:aQ,create_qa_free:"сервис вопросов и ответов",post_subject:aR,new_message:"Новое",not_read:"Не прочитано",spam:"Спам",support_text:"форуме поддержки",security_questions:"Вопросы и ответы",subcategory:"Подкатегории",waiting_approval:"Ожидает модерации",banned:"Пользователь Забанен",no_banned:"Пользователь Не Забанен",category:aS,main_page:"Главная страница",nice_to_see_you:"Рады видеть Вас",records_not_found:"Записей не найдено",last_message:"Последнее сообщение ",from:" от ",not_found:"Ничего не найдено",trusted:aT,no_trusted:"Стандартный пользователь",no_files:"Нет файлов",not_authorized:"Вы не авторизованы",existing_client:"У Вас уже есть аккаунт?",count_topics:"Тем на форуме",topic_name:N,mail_settings_valid:"Поздравляем! Настройки почты успешно проверены и указаны верно",count_messages:"Сообщений на форуме",terms:l,privacy:"Условия конфиденциальности",accept_terms:"Я прочитал(а) и принимаю условия пользования и политику конфиденциальности.",need_accept_terms:"Необходимо принять условия пользования и политику конфиденциальности для регистрации.",copyright_text:"Этот сайт создан на платформе",thanks_confirming:"Спасибо за регистрацию. Ваш аккаунт успешно подтвержден!",thanks_confirming_details:"Чтобы войти на форум используйте Ваше имя пользователя и пароль.",security_messages:"Защита от спама",na:"Не указано",action:"Действия",no_data:"Нет данных",menu:i,no_records:"Нет записей",no_messages:"Нет сообщений",active:aU,need_moderation:"Разрешить к показу",no_active:"Неактивный",important_topic:"Важная тема",topic_closed:"Тема закрыта",account:"Личный кабинет",attention:"Внимание!",pin_topic:"Закрепить",rows_per_page:"Кол-во на странице",unpin_topic:"Открепить",close_topic:"Закрыть тему",open_topic:"Открыть тему",top_menu:"Верхнее меню",bottom_menu:"Нижнее меню",search:t,message:aV,second:"Секунды",minute:"Минуты",hour:"Часы",messages:"Сообщений",threads:"Тем"},animation:{default_fade:"Исчезнование",fade_up:"Исчезнование Вверх",fade_right:"Исчезнование Направо",fade_down:"Исчезнование Вниз",fade_left:"Исчезнование Влево",rotate:"Вращение",rotate_down_left:"Вращение Снизу Налево",rotate_down_right:"Вращение Снизу Направо",rotate_up_left:"Вращение Вверх Налево",rotate_up_right:"Вращение Вверх Направо",slide_down:"Слайд Вниз",slide_left:"Слайд Налево",slide_right:"Слайд Направо",slide_up:"Слайд Вверх",flip:"Разворот",flip_x:"Разворот X",flip_y:"Разворот Y",zoom:"Увеличение",zoom_down:"Увеличение Вниз",zoom_left:"Увеличение Налево",zoom_right:"Увеличение Направо",zoom_up:"Увеличение Вверх",light_speed:"Light Speed",bounce:"Прыжок",bounce_down:"Прыжок Вниз",bounce_left:"Прыжок Налево",bounce_right:"Прыжок Направо",bounce_up:"Прыжок Вверх"},tabs:{delete_forum:m,translation_settings:"Локализации",inbox_pm:"Входящие",sent_pm:"Исходящие",hash_tags_settings:j,badge_settings:n,moderator_main:aW,role_settings:aX,moderator_threads:u,my_profile_stat:"Моя статистика",moderator_users:v,moderator_posts:w,blog_settings:"Настройки Блога",social_providers:"Вход через соцсети",redirect_settings:"Настройки редиректа",ad_settings:"Рекламные блоки",file_settings:o,privacy_settings:l,main_settings:"Основные настройки",mail_settings:x,layout_settings:"Внешний вид",forum_settings:aS,member_settings:y,export_settings:p,page_settings:z,menu_settings:i,social_settings:"Социальные сети",security_settings:A,profile:"Профайл",messages:aV,topics:"Темы"},modals:{delete_forum:"Я понимаю что форум и все данные будут удалены без возможности восстановления.",new_pm:O,delete_user:"Удалить пользователя?",delete_file:"Удалить файл?",delete_badge:"Удалить награду?",delete_badge_confirm:"Вы действительно хотите удалить награду?",delete_tag:"Удалить Хэш Тег?",delete_tag_confirm:"Вы действительно хотите удалить Хэш Тег?",delete_role:"Удалить роль?",delete_role_confirm:"Вы действительно хотите удалить роль?",delete_file_confirm:"Вы действительно хотите удалить файл?",delete_user_confirm:"Вы действительно хотите удалить пользователя?",delete_thread:"Удалить тему?",delete_thread_confirm:"Вы действительно хотите удалить тему?",delete_ad:"Удалить рекламный блок?",delete_ad_confirm:"Вы действительно хотите удалить рекламный блок?",delete_blog_content:"Удалить запись?",delete_blog_content_confirm:"Вы действительно хотите удалить запись?",delete_blog_category:aY,delete_blog_category_confirm:"Будут удалены также все записи и подкатегории(если имеются)",delete_redirect:"Удалить редирект",delete_redirect_confirm:"Вы действительно хотите удалить редирект?",delete_category:aY,delete_category_confirm:"Будут удалены также все сообщения и подкатегории(если имеются).",delete_menu:"Удалить ссылку в меню?",delete_menu_confirm:"Вы действительно хотите удалить ссылку в меню?",delete_page:"Удалить страницу?",delete_page_confirm:"Страница будет удалена навсегда! Вы действительно хотите удалить ее?.",delete_message:"Вы действительно хотите удалить это сообщение?",delete_message_confirm:"Подтвердите, что Вы действительно хотите удалить это сообщение.",delete_topic:"Вы действительно хотите удалить обсуждение?",delete_topic_confirm:"Подтвердите, что Вы действительно хотите удалить ветку сообщений.",delete_all_topic_message:"Вы действительно хотите удалить все сообщения?",delete_all_topic_message_confirm:"Подтвердите, что Вы действительно хотите удалить все сообщения",delete_all_topic_text:"Вы действительно хотите удалить все обсуждение?",delete_all_topic_text_confirm:"Подтвердите, что Вы действительно хотите удалить все темы"},errors:{page_not_found:"Страница не найдена",other_error:"Произошла ошибка"},descriptions:{upgrade_pro:aZ,admin_delete:m,translation_settings:a_,hash_tag_settings:j,badge_settings:n,social_providers:a$,confirm_account:"Активация аккаунта на форуме.",how_to_create:"Инструкция по созданию форума бесплатно. Если Вам нужен современный и удобный форум - узнайте как создать его прямо сейчас.",category_settings:ba,blog_content:P,blog:B,ad_settings:C,blog_settings:Q,my_pm:D,view_pm:R,export_settings:p,mail_settings:x,file_settings:o,moderator_threads:u,moderator_users:v,moderator_posts:w,blog_category:E,edit_member:bb,moderator_index:bc,layout_settings:S,members:bd,menu:i,redirects:be,pages:z,terms_settings:bf,social_settings:bg,security_settings:A,admin_index:bh,change_password:bi,view_profile:"просмотр профиля пользователя. Контакты, сообщения, темы пользователя на форуме.",my_profile:bj,register:bk,login:bl,restore_password:bm,contact_is:"Вы можете всегда связаться с нами через форум обратной связи. Форма обратной связи форума"},titles:{upgrade_pro:aZ,admin_delete:m,translation_settings:a_,hash_tag_settings:j,badge_settings:n,social_providers:a$,search:t,confirm_account:bn,how_to_create:"Как создать бесплатно форум",moderator_threads:u,moderator_users:v,my_pm:D,view_pm:R,file_settings:o,moderator_posts:w,category_settings:ba,blog_category:E,blog_content:P,blog:B,export_settings:p,ad_settings:C,mail_settings:x,blog_settings:Q,edit_member:bb,members:bd,layout_settings:S,redirects:be,menu:i,terms_settings:bf,pages:z,social_settings:bg,security_settings:A,admin_index:bh,moderator_index:bc,change_password:bi,view_profile:"просмотр профиля пользователя",my_profile:bj,register:bk,login:bl,restore_password:bm,contact_us:F},toasts:{voted:"Ваш голос учтен",email_sent:"Код подтверждения отправлен на почту",logout:"Вы успешно вышли из системы",category_created:"Категория успешно создана!",category_updated:"Категория успешно обновлена!",ad_created:"Рекламный блок успешно создан!",ad_updated:"Рекламный блок успешно обновлен!",menu_created:"Ссылка в меню успешно создана!",menu_updated:"Ссылка в меню успешно обновлена!",page_created:"Страница успешно создана!",page_updated:"Страница успешно обновлена!",posts_waiting_approval:"Постов ожидающих подтверждения:",users_waiting_approval:"Пользователей ожидающих подтверждения:",threads_waiting_approval:"Тем ожидающих подтверждения:",register_successfully:"Регистрация прошли успешно",confirm_email:"Необходимо подтвердить Email",favicon_updated:"Фавикон успешно обновлен",background_updated:"Фоновое изображение успешно обновлено",select_logo:"Выберите логотип",select_favicon:"Выберите Фавикон",logo_updated:"Логотип успешно обновлен",logo_deleted:"Логотип успешно удален",profile_updated:"Профиль успешно обновлен",terms_success:"Условия использования обновлены",avatar_updated:"Аватар успешно обновлен",select_avatar:"Выберите аватар",select_background:"Выберите Фоновое изображение",auth_success:"Аунтификация прошла успешно",settings_success:"Настройки успешно сохранены",created:bo,updated:"Обновлено",deleted:"Успешно удалено",record_created:"Запись создана",password_changed:"Пароль успешно изменен",message_send:"Сообщение отправлено",success:"Успешно",error:"Прозошла ошибка..."},headers:{admin_hash_tags:j,admin_badges:n,roles:aX,search:t,related_post:"Похожие записи",related_thread:"Похожие обсуждения",edit_profile:bp,posts_on_moderation:"Сообщений на модерации:",threads_on_moderation:"Тем на модерации:",users_on_moderation:"Пользователей на модерации:",moderator_home:"Раздел Модератора",select_export:"Выберите что экспортируем",my_pm:D,admin_members:y,moderator_index:aW,blog:B,file_settings:o,export_settings:p,admin_home:"Админ Панель",admin_redirects:"Настройка редиректов",admin_ad:C,color_settings:"Настройки цвета",primary_color:"Primary цвет",secondary_color:"Secondary цвет",accent_color:"Accent цвет",info_color:"Info цвет",success_color:"Success цвет",error_color:"Error цвет",warning_color:"Warning цвет",change_password:bq,view_profile:br,my_profile:"Мой профайл",register:T,menu:i,about_us:"О нас",follow_us:"Мы в социальных сетях",login:"Вход",restore_password:bs,contact_us:F},activations:{email:"Активация участников после подтверждения почты",manually:"Активация участников вручную",automatically:"Активация участников автоматически после регистрации"},mail:{other:"Другой",gmail:"Gmail",yandex:"Yandex",yahoo:"Yahoo",mail:"Mail.ru",rambler:"Rambler",bing:"Bing",outlook:"Outlook",aol:"AOL"},toc:{disabled:"Не показывать",top:"Наверху статьи",bottom:"Внизу статьи"},export:{yes:"Да",no:bt,blog_category:E,blog:"Записи блога",forum:"Форум",profile:y},watermark:{center:"Центр",top_left:"Верхний-Левый Угол",top_right:"Верхний-Правый Угол",bottom_left:"Нижний-Левый Угол",bottom_right:"Нижний-Правыый Угол"},conditions:{threads:"Создание Темы",posts:"Ответы в темах",best_answers:M},forms:{default_role:"Роль по умолчанию для новых пользователей",hash_tags:j,meta_title:"Meta Title",meta_description:"Meta Description",hash_tag:"Хеш Тег (не обязательно)",value:"Значение",condition:"Условие",allow_hash_tags:"Включить Хеш Теги",access_pm:"Персональные Сообщения",create_post:"Создавать Пост",edit_own_post:"Редактировать свой пост",edit_any_post:"Редактировать любой пост",moderate_data:"Модерировать данные",badge_name:q,badge_description:U,badge_icon:"Иконка",access_to_admin_tool:"Доступ в админку",category:"Категория:",permissions:"Доступ",is_public_category:"Доступ всем пользователям",created:"Создан",roles:"Только указанные роли имеют доступ",move_to_category:"Перенести Темы и Сообщения в другую категорию",blog_move_to_category:"Перенести статьи в другую категорию",scrollable_pagination:"Скроллинг пагинация",add_source:"Добавить источник при копировании?",allow_likes:"Разрешить пользователям лайкать посты?",add_watermark:"Добавить водяной знак к изображениям?",add_watermark_position:"Позиция водяного знака",add_source_text:"Текст",add_social_link:"Добавить ссылку на соцсеть",about:aO,is_profile_public:"Сделать профиль публичным:",user_link_type:"Тип:",user_link:"Ссылка:",code_theme:"Шаблон подсветки кода:",default_add_source_text:"Источник:",background_full:"Растянуть на весь экран",confirm_your_email:"Подтвердите Вашу почту",notifications:"Уведомления",to_username:"Кому",signature:aP,page_transition:"Переход между страницами",subject:"Тема",no_ad:"Отключить рекламу в этом посте",is_related_post:"Включить похожие записи",related_post:"Количество похожих записей",is_related_thread:"Включить похожие обсуждения",related_thread:"Сколько похожих обсуждений выводить",max_length:"Длина должна быть не более XX символов",custom_css:"Свой CSS",export_data:V,export_data_deleted:"К сожалению, данные удалены. Мы храним их 3 дня. Если вам нужны свежие данные, пожалуйста, создайте новый запрос.",export_data_deleted_short:"К сожалению, данные удалены.",from_name:"От кого:",to_name:"Кому:",security_question_question:bu,security_question_answer:"Ответ",blog_social_sizes:"Размер иконок",notify_on_moderation:"Уведомлять о сообщениях на модерации",directory_name:bv,question:bu,banned:"Забаннен",created_date:bo,status:"Статус",export_settings:"Настройки экспорта",directory:bv,robots_txt:"Robots.txt",nofollow:"Добавить аттрибут nofollow для ссылок",code:"Код",file:"Файл",toc:aR,answer:"Введите ответ",one_time:"Показать один раз",show_every:"Показывать каждые",show_after:"Показывать после",css_selector:"CSS селектор",trusted:aT,edit_profile:bp,messages_before_auto_approved:"Для новых клиентов сколько первых сообщения модерировать вручную",mark_uncertain_messages:"На модерацию сомнительные сообщения",thread_limit:"Лимит новых тем",thread_limit_type:"Лимит новых тем в",register_limit:"Лимит регистраций",register_limit_type:"Лимит регистраций в",post_limit:"Лимит ответов на темы",post_limit_type:"Лимит ответов на темы в",avatar:"Аватар",add_in_menu:"Добавить в меню",image:bw,name:q,blog_category:"Категория",summary:"Краткий текст",category_name:q,text_font_family:"Шрифт",new_password:"Новый пароль",old_url:"Старый URL",template:"Шаблон",new_url:"Новый URL",is_dark:"Dark режим",topic_name:N,page:"Страница",password:"Пароль",role:"Роль",confirm_password:"Подтвердите пароль",username:"Имя пользователя",select_page:"Выбрать страницу",select_manually:"Ввести вручную",logo:"Логотип",link:"Ссылка",text_link:"Текст ссылки",firstname:"Имя",host:"Хост",port:"Порт",encryption:"Encryption",user:"Username",position:"Позиция",activation:"Активация пользователей",open_new_tab:"Открывать в новом окне",no_index:"Не индексировать поисковыми системами",lastname:"Фамилия",type_background:"Тип фона",update:bx,no_background:bt,background_color:"Цвет",background_image:bw,active:aU,page_name:q,forum_name:q,footer_code:"Код в футер (например счетчики)",forum_description:U,parent_category:"Родительская категория",category_description:U,company:"Компания",favicon:"Фавикон",favicon_png:"Фавикон PNG",email:"Email",message:"Сообщение",text:"Текс"},social_size:{small:"Маленький",medium:"Средний",large:"Большой"},buttons:{upgrade_pro:"PRO статус",delete_forum:m,buy_now:"Выбрать",make_default_role:"Сделать роль по умолчанию для новых пользователей",edit_hash_tag:"Редактировать Хэш Тег",new_hash_tag:"Создать Хэш Тег",new_badge:"Создать награду",edit_badge:"Редактировать награду",add_role:by,edit_role_link:"Редактировать Роль",add_role_link:by,login_google:r,login_facebook:r,login_github:r,cancel:"Отменить",login_google_tooltip:"Войти с помощью Google",delete_and_keep_messages:"Удалить (оставить соообщения\u002Fтемы)",login_facebook_tooltip:"Войти с помощью Facebook",login_github_tooltip:"Войти с помощью Github",answer:W,best_answer:M,moderate:aN,search_more:"Искать еще",ask_question:"Задать вопрос",my_profile:"Профиль",show_more:"Показать еще",edit_thread:"Редактировать тему",confirm_email:"Подтвердить Email",resend_code:"Отправить код повторно",add_redirect:"Добавить редирект",new_export:V,deactivate:"Деактивировать",activate:"Активировать",export_data:V,unbanned:bz,bann:bA,reply_pm:W,new_pm:O,spam:"Пометить как спам",blog_social_share:"Поделиться в социальных сетях",edit_redirect:"Редактировать редирект",edit_category:bB,new_blog_category:"Новая категория",upload_file:"Загрузить файл",blog_category:"Категории Блога",blog_content:"Посты блога",read:"Читать",edit_post:"Редактировать сообщение",edit_blog_category:bB,new_blog_content:"Новая запись",edit_blog_content:"Редактировать запись",add_category:"Добавить категорию",add_menu_link:"Добавить новую ссылку в меню",edit_menu_link:"Редактировать ссылку",add_ad:"Добавить рекламный блок",edit_ad:"Редактировать рекламный блок",new_ad:"Новый блок",new_file:"Новый файл",new_directory:"Новая директория",upload_directory:"Создать",new_menu:"Добавить ссылку в меню",new_page:"Добавить страницу",validate_mail_settings:"Проверить настройки",edit_page:"Редактировать страницу",upload_avatar:"Загрузить аватар",upload_logo:"Загрузить Логотип",delete_logo:"Удалить Логотип",upload_favicon:"Загрузить Фавикон",upload_favicon_png:"Загрузить Фавикон PNG",contact_us:F,topic_name:N,home:K,ban:bA,unban:bz,admin:"Админка",profile:bC,delete_all_topic:"Удалить все темы",delete_all_messages:"Удалить все сообщения",signin:r,upload_background:"Загрузить Фоновое изображени",register:T,logout:"Выход",reply:W,new_post:"Создать пост",save:"Сохранить",new_message:O,restore_password:"Восстановить пароль",login:r,close:"Закрыть",add:"Добавить",change_password:"Изменить пароль",edit:"Редактировать",remove:bD,reset:"Сбросить цветовые настройки",update:bx,delete:bD,send:"Отправить",clear:"Очистить"},breadcrumbs:{pro:"Статус PRO",admin_delete:m,translation:"Локализация",privacy:l,hash_tag_settings:j,badge_settings:n,search:t,blog_home:B,menu_home:i,pm:D,social_providers:"Вход через социальные сети",view_pm:R,confirm_account:bn,ad_settings:C,file_settings:o,export_settings:p,privacy_settings:l,blog_categories:E,moderator_index:"Раздел модератора",moderator_threads:u,moderator_users:v,moderator_posts:w,blog_content:P,forum_settings:"Настройки категорий",blog_settings:Q,mail_settings:x,layout_settings:S,edit_member:"Редактировать пользователя",members:y,redirects:"Редиректы",pages:z,social_settings:"Настройки Социальных сетей",security_settings:A,admin_index:"Админ панель",change_password:bq,home:K,my_profile:bC,view_profile:br,login:"Авторизация",register:T,contact_us:F,restore_password:bs},plan:{success:"Оплата прошла успешно!",success_detail:"Ваша оплата прошла успешно. Спасибо за покупку.",failed:"Ошибка оплаты",failed_detail:"К сожалению, Ваш платеж не может быть обработан.",failed_detail_line_2:"Проверьте платежные данные и повторите попытку.",free:"Бесплатный",free_price:"0 руб\u002Fмесяц",free_description:"Отлично для начинаюших",pro:"ПРО",pro_price:"299 руб\u002Fмесяц",pro_description:"Самый популярный",enterprise:bE,enterprise_price:bE,custom_price:"Свяжитесь с нами",feature:{unlimited_posts:"Неограниченное кол-во Постов",unlimited_threads:"Неограниченное кол-во Тем",unlimited_category:"Неограниченное кол-во Категорий",unlimited_users:"Неограниченное кол-во Пользователей",ssl:"Бесплатный SSL",use_own_domain:"Использовать свой домен",spam_protection:"СПАМ Защита",ad_free:"Без рекламы",no_copyright:"Без копирайта в футере(подвале)",dedicated_server:"Выделенный сервер"}}}}}}}(0,true,false,"",null,1,"Пользователь","Как использовать свойства компонента в Vue.js?","Меню","Хэш Теги","JavaScript","Пользовательское соглашение","Удалить форум","Награды","Файлы","Экспорт","Название","Войти","#0095FF","Поиск","Модерация тем","Модерация пользователей","Модерация сообщений","Настройки почты","Пользователи","Страницы","Безопасность","Блог","Управление рекламой","Личные сообщения","Категории блога","Обратная связь",31490,"kak-ispol-zovat-svoistva-komponenta-v-vue-js","Место где разработчики учатся и делятся кодом","#FF6B00","Главная","\u002F","Лучший ответ","Заголовок","Новое сообщение","Список записей блога","Настройки блога","Просмотр сообщения","Настройки внешнего вида","Регистрация","Описание","Экспорт данных","Ответить","qa","javascript","Как использовать свойства компонента в React.js?","Как использовать свойства компонента в Svelte?","Как использовать вычисляемые свойства в Vue.js?","Как использовать состояние компонента в Vue.js?","Как использовать жизненный цикл компонента в Vue.js?","Как вызвать метод дочернего компонента в Vue.js?","avatar\u002Fnicolette.stoltenberg\u002F46-2 (1).jpg","nicolette.stoltenberg","ROLE_CLIENT","Вопросы и ответы от разработчиков: место где программисты делятся кодом и учатся. Помощь программистам и разработчикам с кодом.",6,{},"Java",{},"Python","Python вопросы и ответы",{},"JavaScript вопросы и ответы",{},"PHP","PHP вопросы и ответы",{},"SQL","SQL вопросы и ответы",{},"Golang","Golang вопросы и ответы",{},"C\u002FC++","C\u002FC++ вопросы и ответы",{},"HTML\u002FCSS","HTML\u002FCSS вопросы и ответы",{},"Ruby","Ruby вопросы и ответы",{},"Swift","Swift вопросы и ответы",{},"Другие","Другие языки программирования","Модератор","Обо мне:","Подпись","Создайте свой","Содержание","Категории","Доверенный пользователь","Активный","Сообщения","Статистика","Роли","Удалить категорию?","Получить статус PRO","Настройки локализации","Вход через социальные сети - настройки","Категории форума","Редактирование пользователя","Панель модератора","Список пользователей","Управление редиректами","Настройки пользовательского соглашения","Настройки социальных сетей","Панель администратора","Смена пароля на форуме","Мой профиль на форуме","Регистрация на форуме","Авторизация на форуме","Восстановление пароля на форуме","Активация аккаунта","Создано","Редактировать профиль","Смена пароля","Просмотр профиля","Восстановление пароля","Нет","Вопрос","Директория","Изображение","Обновить","Добавить Роль","Разбанить","Забанить","Редактировать категорию","Мой профиль","Удалить","Компании"));</script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/7b8ec9d.js" defer></script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/25edc65.js" defer></script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/863688a.js" defer></script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/cb42003.js" defer></script> </body></html> 
