Q&A
単一コンポーネントは Webpack や Browserify のビルドツールでトランスパイルする必要がありますがやっていますか？
<comp-child val="これは子A"></comp-child>
のようにして表示するテキストを表示するコンポーネントを作成したいと考えております。
以下のようなコンポーネント設計のものを単一ファイルに変更するときどのようにすればいいか
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Vue.js App</title> 6 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet"> 7</head> 8<body> 9 <div id="app"> 10 <comp-child val="これは子A"></comp-child> 11 <comp-child val="これは子B"></comp-child> 12 </div> 13 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 14 <script src="main.vue"></script> 15</body> 16</html>
javascript
1Vue.component('comp-child', { 2 // テンプレートで受け取ったvalを使用 3 template: '<p>{{ val }}</p>', 4 // 受け取る属性名を指定 5 props: ['val'] 6}) 7 8 9var app = new Vue({ 10 el: '#app' 11})
を書き換えて
javascript
1<template> 2 <div> 3 <p>{{ val }}</p> 4 </div> 5</template> 6 7<script> 8 export default { 9 props: ['val'] 10 } 11 } 12</script>
と書いたのですがうまく動きません。
ご教授のほどよろしくお願いします。
回答1件
0
ここを確認してみてください。
公式ドキュメント - 単一ファイルコンポーネント
Vue.js は公式ドキュメントが日本語で、内容もかなり手厚いです。
一度すべてに目を通してみることをお勧めします。
投稿2018/08/22 02:33
総合スコア1803
あなたの回答
tips
プレビュー
