原生Vue 引入组件 数据传递

原生Vue 引入组件 数据传递

    • Vue组件 结合 Thymleaf

Vue组件 结合 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(){      }
 }
)

你可能感兴趣的:(前端踩坑)