Question

我有一个像这样的组件：

<my-dropzone value:"...."> 
    <h1>upload</h1>
    <p>your files</p>
</my-dropzone>

我的vuejs组件是：

<template>
    <div>
        <div class="dropzone"></div>
        <slot></slot>
    </div>
</template>

<script>
  ....

    export default {
        props:{
           ....
        },
        components: {
            vueDropzone: vue2Dropzone
        },
        data() {
            return {
                arrayFiles: [],
                dropzoneOptions: {

                   ....
                    dictDefaultMessage: // <------ I want to assign slot data here
                    ,
                  ....
        },
        mounted() {
           .....

        },
        methods: {
            .....
        },
        computed: {
           .....
        }
    }
</script>

现在我想获取插槽html数据并将其分配给组件的某些局部变量，并在方法中使用。可能吗？有没有更好的解决方案将html传递给数据变量

Answer 1

您可以使用Vue.js vm.$slots来访问广告位子级作为HTML节点。这是唯一推荐的方法。 Official Vue.js文档确实很好地解释了这一点。

您可以对组件使用render()函数，而不是template。插槽旨在与渲染功能一起有效使用。没有渲染功能，使用vm.$slots并没有那么有用。

详细解释：

Vue 广告位并非按照您需要的方式工作。想象一下将插槽作为渲染区域。另外，广告位实际上并不包含HTML作为字符串。它已从virtual-dom传递并在屏幕上呈现为HTMLElements。在处理代码时，html作为字符串已转换为呈现函数。

或者，如果您需要真正访问基础HTML节点，请考虑使用普通的DOM API，例如querySelector()等。就$refs而言，广告位中的内容归所有者所有父组件，因此您将无法使用它。

如何将vuejs html模板作为插槽传递并从数据或方法访问

1 个答案:

详细解释：