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

Entry

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

2021/05/26 19:02
Category:日記
Tag:Vue.js

みんな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}

}