vue 中 v-html绑定的字符串html代码中含又有vue双向绑定怎么实现

问题遇到的现象和发生背景

vue中有一段html代码，用v-html进行双向绑定，但是这个html代码片段中含有双向绑定数据，插入到位置后就不起作用了，用的是vuejs2.x，

问题相关代码，请勿粘贴截图
<template>
    <div v-html="myhtml">
        
    </div>
</template>

<script>
export default {
    name: "testcom",
    data(){
        return{
            age:18,
            myhtml:`<p @click="age++">我的年龄是：{{age}}</p>`
        }
    }
}
</script>
运行结果及报错内容
我的年龄是：{{age}}
我的解答思路和尝试过的方法

我试了好多种办法都不行，做到单独子组件中进行重新渲染也不行，插槽也不行，只要是字符串拼接的html代码，都会原样输出到插入位置，代码中的vue双向绑定都会原样输出

我想要达到的结果

我希望通过字符串插入的绑定的html代码片段，其中代码片段又含有vue双向绑定关键字，希望一样要起到双向绑定的作用，我该怎么办？

直接上js操作

img


<div id="app">
    <div v-html="myhtml">
    </div>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            age: 18,
            myhtml: `<p id="myp">我的年龄是：{{age}}</p>`
        },
        mounted() {
            var p = document.getElementById('myp');
            p.addEventListener('click', () => {
                this.age++;
                p.innerHTML =`<p id="myp">我的年龄是：${this.age}</p>`
            });
            p.innerHTML = `<p id="myp">我的年龄是：${this.age}</p>`
        }
    });
</script>

你题目的解答代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-html="myhtml">
    </div>
</div>

<script type="text/javascript">

var app = new Vue({
    el: '#app',
    name: "testcom",
    data(){
        return{
            age:18,
        }
    },
    computed: {
        myhtml() {
            return `<p onclick="app.age++">我的年龄是：${this.age}</p>`;
        }
    }
});

</script>

</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

<template>
  <div class="workBench">
    <div v-html="myhtml">
        
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        age: 18,
        myhtml: ''
      }
    },
    created () {
      this.myhtml = `<p @click="age++">我的年龄是：${this.age}</p>`
    },
    methods: {
    }
  }
</script>
<style lang="scss" scoped>
</style>

我只能放弃了，已经很接近了，但还是不行，
应该是用Vue.extend来创建动态子组件，但是一次创建完好像和父组件脱离上下文关系了，父组件的变化子组件的props接收值不能响应变化，

<template>
  <div>
    <button @click="changeMyHtml">第一步：点击更换MyHtml</button><br/>
    <button @click="changeYear">第二步：点击更新年份</button>
    <div v-html="myhtml"> </div>
  </div>
</template>


<script>
import Vue from 'vue'
  export default {
    data () {
      return {
        year : 2022,
        myhtml: "初始化的年份是：{{nian}}"
      }
    },


    watch:{
        myhtml(newVal){
            var MyComponet = Vue.extend({
                template:newVal,
                props:["nian"],
                mounted() {
                   console.log("创建了动态组件，并获得了年份："+this.nian);
                   //这里输出入一次：
                   //log结果：创建了动态组件，并获得了年份：2022
                   //结论：说明父组件用propsData传个这个动态组件，用props接收，实际是接收到了。
                },
                watch:{
                    nian(){
                      console.log("动态组件监听到了year的变化："+this.nian);
                      //再次调用父组件的changeYear方法，父组件的this.year更改了，但是传给子组件里的这个nian没有变化，但是这里监听不到
                      //结论：好像是用Vue.extend创建的内部动态组件，和外部父组件脱离了，没有上下文关系了。
                    }
                }
            });
            new MyComponet({
                propsData:{nian:this.year}
            }).$mount('#myhtml');
        }
    },

    methods: {
        changeMyHtml(){
            this.myhtml=`更换html后年份是：{{nian}}`
        },
        changeYear(){
            this.year++
            console.log(this.year)
        }
    }
  }
</script>