Vue 2.0 向子组件传递函数：功能正常但HTML输出异常求优化

这个问题的核心原因是你的子组件没有将这些函数类型的props进行正确声明，导致Vue把它们当成了普通的HTML属性处理，自动将函数转换成字符串渲染到DOM中了。下面是具体的优化方案：

1. 在子组件中明确声明函数类型的Props #

在你的dynamsoft-component子组件里，把onAppSend和onAppClose明确声明为Function类型的props，这样Vue就会将它们作为组件的内部逻辑属性处理，不会渲染到HTML结构中：

<script>
export default {
  // 禁止未声明的props自动绑定到根元素（可选，但更严谨）
  inheritAttrs: false,
  props: {
    docs: {
      type: [Array, Object],
      required: true
    },
    onAppSend: {
      type: Function,
      required: false,
      default: () => {} // 可选：设置默认空函数避免报错
    },
    onAppClose: {
      type: Function,
      required: false,
      default: () => {}
    }
  },
  // 子组件内部调用这些函数的示例
  methods: {
    handleSend() {
      if (this.onAppSend) {
        this.onAppSend();
      }
    },
    handleClose() {
      if (this.onAppClose) {
        this.onAppClose();
      }
    }
  }
}
</script>

2. 避免不当使用v-bind="$attrs" #

如果你的子组件根元素使用了v-bind="$attrs"，它会把所有未声明为props的属性（包括你的函数）都绑定到根DOM元素上。如果确实需要使用$attrs传递其他属性，记得先把函数类props声明好，这样它们就不会被包含在$attrs里了。

3. 优化Vue实例的函数挂载方式 #

你直接在Vue实例上添加app.onSend = () => console.log('data')的方式，虽然能工作，但这些属性不是响应式的。如果需要响应式的函数引用，建议把它们放到data或者methods中：

const app = new Vue({
  el: '#app',
  data() {
    return {
      displayComponent: true,
      docs: [],
      // 可以在这里定义函数，或者用methods
      onAppClose: null,
      onAppSend: null
    };
  },
  methods: {
    // 或者直接在这里定义函数，传递给子组件
    handleSend() {
      console.log('data');
    },
    handleClose(data) {
      console.warn('dwdawad');
      console.log('data');
    }
  },
  mounted() {
    // 如果需要从window全局对象赋值
    this.onAppSend = window.globalSendFunction;
    this.onAppClose = window.globalCloseFunction;
  }
});

然后模板里可以直接绑定methods中的函数：

<div id="app">
  <dynamsoft-component 
    v-if="displayComponent" 
    :docs="docs" 
    :onAppSend="handleSend" 
    :onAppClose="handleClose" 
  ></dynamsoft-component>
</div>

这样处理后，控制台的HTML就不会再显示函数代码了，同时函数的功能也能正常工作。

内容的提问来源于stack exchange，提问作者Arsen Karapetjan