Entry

【Vue.js】うちにはCLI環境なんてない

みんなVue CLIでるーたーとかなんとかーとかかんとかーとかをごりごりやるんですね!
ご無沙汰しております。せこせこ野良知見ばかりをためる私です。

というわけで、もじゅーるインポートなどをしつつ、 import './test.vue' なんてうちのこではできません! みたいな状況でなんとかかんとかした覚書を残しに来た次第です。
みんな気軽に手元でローカルサーバ立ててやってんのな。昔の私ならやってたかな。どうかな。

  • 親は子コンポーネントが書いてあるやつをインポートして、子供には孫コンポーネントもローカル登録であるよ
  • 孫は実際のを持ってきちゃってるからemitがどこにも行かないことになってるけど、実際はちゃんと子供んとこに書いてるよ
  • ここには書いてないけど、子供のテンプレートの孫コンポーネントんとこで属性値をダブルコーテーションで囲ってないのがあってドハマりしたよ(いましめ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body><div id="app">
<cmp-a></cmp-a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="module">
import test from './test.js';
const v = new Vue({
  el: "#app"
 ,data: {  }// data
 ,components: {
      'cmp-a': test
  }
});//Vue
</script>
</body></html>
子と孫

const test= {
  props: ['t']
 ,template: `<td class="ico" :class="{on:t}" @click="$emit('onoff')">{{'○'}}{{t}}</td>`
}

export default { 
 data(){ return { test: [] } }
 ,template:`<div>test<template v-for="n in 3"><child :t=n></child></template></div>`
 ,components: { 'child': test}

}

Pagination

Comment

  • コメントはまだありません。

Post Your Comment

  • コメントを入力してください。
登録フォーム
Name
Mail
URL
Comment
閲覧制限
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

Utility

Calendar

11 2021.12 01
SMTWTFS
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -