Как получить данные от родителя к ребенку через Props

249

12 февраля 2018, 05:38

Добрый вечер. Есть такой код:

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)) что бы можно было считывать(в том числе и динамически) данные из родительского блока? Что только не пробовал уже - всегда или андефайнд выдает или ошибку в консоли..

Answer 1

Так вы пропс объявили в MyTemplateCanvas, а передаете в SubWrapper. Конечно не будет работать. Я бы сделал так, хоть это и плохая практика: https://jsfiddle.net/mkt1m5o0/

const SubWrapper = { 
  name: 'SubWrapper', 
  template: '#sub-wrapper', 
  data () { 
    return { 
      width: 0 
    } 
  }, 
  methods: { 
    handleResize () { 
      this.width = this.$el.clientWidth 
    } 
  }, 
  mounted () { 
    this.$nextTick(() => { 
      this.width = this.$el.clientWidth 
    }) 
  } 
} 
 
const MyTemplateCanvas = { 
  name: 'MyTemplateCanvas', 
  template: '#my-template-canvas', 
  watch: { 
  	name (name) { 
    	console.log('name:', name) 
  	} 
  }, 
  computed: { 
  	name () { 
    	return this.$parent.width 
    } 
  }, 
  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> 
</head> 
<body> 
  <div class="wrapper"> 
    <sub-wrapper> 
      <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> 
</body> 
</html>