问题描述

是这样的需求：有一堆未知数量的不具名slot要传入组件，组件内部要给每一个slot包装新的样式。
于是我使用了jsx来进行包裹
但是slot内部的元素（比如input），无法双向绑定了，
input的value更改，父组件可以接收到，但是父组件去更改绑定的v-model，input的value没变化

相关代码

子组件

<template>
    <ul class="flex-box">
        <Slotlist v-for="(item, index) in slotList"
                  :key="'li-'+index"
                  :content="item"
        />
    </ul>
</template>
<script type="text/javascript">
import Slotlist from "./slotlist.js";
export default {
    components: {
        Slotlist
    },
    computed: {

        slotList () {
            let arr = this.$slots.default || []
            return arr.filter((item) => !!item.tag)
        }
    }
}
</script>

包裹slot的jsx：

import Vue from 'vue'; 

export default Vue.component('slotlist', {
    props: {
        content: {
            type: Object,
            default: () => {}
        }
    },
    render: function (createElement, context) {
        return createElement("li", {
            class: {
                "flex-child": true
            }
        }, [this.content]);
    }
})

传入slot的父组件：

<template>
    <div>
        <button @click="changeValue1" >更改value1的值</button>
        value1:{{ value1 }}
        <Child>
            <input v-model="value1">
            <input v-model="value2">
            <input v-model="value3">
        </Child>
    </div>
</template>
<script type="text/javascript">

import Child from "./child.vue";
export default {
    components: {
        Child
    },
    data() {
        return {
            value1: '1',
            value2: '2',
            value3: '3'
        }

    },
    methods: {
        changeValue1() {
            // value1更改了但input没变化
            this.value1= '333'
        }
    }

}
</script>