動的にHTMLタグを変更するにはどのように反応します

たとえば、Aの需要がある、サブアセンブリは、親コンポーネントによって渡さprops動的に表示するために、ラベルを、最初の問題であることを考える、それを達成する方法？<h1><h6>reactvue

Vueの実装

親コンポーネント

<template>
	<div>
		<Son :tagSize="1"/>
	</div>
</template>

<script>
import Son from '../components/Son';
export default {
    name: "Father",
    components:{
        Son
    }
};
</script>

サブコンポーネント

<template>
	<div>
        <h1 v-if="tagSize === 1">测试</h1>
        <h2 v-else-if="tagSize === 2">测试</h2>
        <h3 v-else-if="tagSize === 3">测试</h3>
        <h4 v-else-if="tagSize === 4">测试</h4>
        <h5 v-else-if="tagSize === 5">测试</h5>
        <h6 v-else>测试</h6>
	</div>
</template>

<script>
export default {
	name: "Son",
	props: {
		tagSize: {
            type:Number,
            default:1
        }
	}
};
</script>

vue我々はまた、上記の要件を達成することができますが、ダイナミックにすることはできませんので、そのテンプレートの構文htmlます。たとえば、ステッチの仕方によって直接、ラベルをラベルを変更することができれば、それは非常に柔軟ではないラベルは、想像下げて"<h"+tagSize+">测试</h"+tagSize+">"これに対処するように、道を需要が、その後、明らかに非常に便利な、ADOは、見とるreact実装を。

実装を反応させます

親コンポーネント

import React from 'react';
import Child from './Child.js';

class Father extends React.Component{
    render(){
        return (
            <React.Fragment>
                <Child size = { 1 }/>
            </React.Fragment>
        )
    }
}
export default Father;

サブコンポーネント

import React from 'react';

const Child = (props)=>{
    let MarkUp = `h${props.size}`;
    return (
        <React.Fragment>
            <MarkUp>你好</MarkUp>
        </React.Fragment>
    )
}

export default Child;

二つの方法を見つけるCompared'll reactより適切、となり、需要のこの種を達成するためreactの構文JSXよりも、文法、構文個人的な感情をテンプレートの構文はより柔軟ですが、今もサポートしています。vuetemplateVueJSX