Добрый вечер. Есть такой код:
const SubWrapper = { template: '#sub-wrapper', data: function () { return { width: '' } }, methods: { handleResize () { this.width = this.$ el.clientWidth } }, mounted: function () { this.$ nextTick(function () { this.width = this.$ el.clientWidth; }) } }; const MyTemplateCanvas = { template: '#my-template-canvas', props:['name'], data () { return { configKonva: { width: 600, height: 600, stroke:'gray' }, configCircle2: { x: 50, y: 50, width: 260, height: 160, fill: "gray", stroke: "#2a1725", strokeWidth: 2 } } } }; Vue.use('VueKonva'); const root = new Vue({ el: '.wrapper', components: { SubWrapper, MyTemplateCanvas } });div, span, a, ul, li, dl, dt, dd, fieldset, form, label, button, input, h1, h2, h3, h4, h5, h6, strong, p, br, i, figure, figcaption { margin: 0; padding: 0; border: 0 none; } :focus { border: 0 none; } button, a:hover, label:hover { cursor: pointer; } li { list-style: none outside none; } img { border: medium none; } a:active, a:focus, img, input, textarea { outline: none; } a:active { background-color: transparent; } textarea { resize: none; overflow: auto; } th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } body { margin: 0; background-color: #fff; } .wrapper { margin: 0 auto; width: 100%; height: 100%; } .wrapper .sub_wrapper{ margin: 0 auto; width: 100%; height: 100%; } .konvajs-content{ width: 100% ! important; } .wrapper .sub_wrapper canvas{ background-color: #c0c0c0 ! important; display: block; }<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>MK Trading</title> <link href="style/style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="wrapper"> <sub-wrapper name="width"> <my-template-canvas></my-template-canvas> </sub-wrapper> </div> <script id="sub-wrapper" type="text/x-template"> <div class="sub_wrapper"> <resize-observer @notify="handleResize" /> <slot></slot> </div> </script> <script id="my-template-canvas" type="text/x-template"> <v-stage ref="stage" :config="configKonva"> <v-layer ref="layer"> <v-rect ref="zzz" :config="configCircle2"></v-rect> </v-layer> </v-stage> </script> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-resize@0.4.3/dist/vue-resize.min.js"></script> <script src='https://unpkg.com/konva'></script> <script src='https://unpkg.com/vue-konva'></script> <script src="js/script.js"></script> </body> </html>Вопрос: Как в данной конфигурации(кода) правильно прописать(с синтаксической точки зрения для HTML и JS файлов) св-ва(в родителе(sub-wrapper) и в ребенке(my-template-canvas)) что бы можно было считывать(в том числе и динамически) данные из родительского блока? Что только не пробовал уже – всегда или андефайнд выдает или ошибку в консоли..
