原生Vue導入コンポーネントデータ転送

15734 ワード
フロントピット
原生Vue導入コンポーネントデータ転送
  • VueコンポーネントはThymleaf
    • と結合する
    VeeコンポーネントとThymleafの組み合わせ
    サブアセンブリ
    
<html lang="en" xmlns:th="http://www.springframework.org/schema/data/mongo">
<head>
  <meta charset="UTF-8">
  <title>Model Listtitle>
head>
<body>
<div id="app">
  <template id="computableModel" th:fragment="computableModel">
    <div class="clearfix">
    	...
    	<avatar :username="modelItem.name" :size="60" :rounded="false" style="float:left">avatar>
    	...
    div>
  template>
div>
body>
html>

    				   
Vue.component("computable-models",
    {
      template: "#computableModel",
      			   
      props:["checkModelList"],
      components: {
      		           
        'avatar': VueAvatar.Avatar
      },
      data(){
        return{
        		   
          checkModelList:[]
        }
      },
      methods:{      },
      mounted(){      }
    }
)

    親コンポーネント
    
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <title>Integrated Modelingtitle>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <link rel="stylesheet" href="/static/css/page/computableModelList.css">
head>
<body>
<div id="app">
		    				   				   
    <computable-models :check-model-list="checkModelList" >computable-models>
    
div>
		   Thymleaf      
<template th:replace="fragments/computableModelList :: computableModel">template>
<script src="/static/js/page/computableModelList.js">script>
body>
  <script src="/static/js/common/vue.min.js">script>
  		           
  <script src="/static/js/common/vue-avatar.min.js">script>
  <script src="/static/js/common/axios.min.js">script>
html>


    var vue = new Vue({
  el: "#app",
  data: {
  		   
    //            
    checkModelList:[]
  },
  	methods:{      },
   	mounted(){      }
 }
)
    vueCli 3およびvueCli 4 vueプロジェクトの作成
    vueでのinputボックスクリアボタンの表示と非表示