Question

我有一个问题。我想将函数链接传递给子组件。它正在工作，但在HTML中，我得到了那些代码。改善它是正确的吗？

我有Vue实例

app = new Vue({
    ... some code
    data: {
      onAppClose: null,
      onAppSend: null
    }
})

我想从全局窗口添加任何功能。或者在Vue实例中注册函数

app.onSend = () => console.log('data')

并将此功能传递给孩子

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

但是我在控制台中获得了这个HTML模板

<div id="app">
 <div onappsend="()=>{}" onappclose="function (data) {
    console.warn('dwdawad')
    console.log('data')
}"></div>
</div>

Answer 1

你的示例代码没有多大意义 - 你想添加一个不是div的监听器或者将一个函数传递给子组件吗？`

我假设后者。 Vue有custom events。

父模板：

<div v-on:appsend="someMethod" v-on:appclose="someOtherMethod"></div>

父组件方法：

methods: {
  someOtherMethod: function (data) {
    console.warn('dwdawad')
    console.log('data')
  },
  // ...
}

然后从孩子身上散发出来：

this.$emit('appclose', {id: 'whatever'} /*pass data here*/)

编辑：

我仍然没有看到这些函数如何直接在模板中结束，但真正的问题是：HTML不区分大小写。因此:onAppSend变为:onappsend。你必须使用kebap-case：:on-app-send。 Vue会将其转换为组件中的onAppSend。

Answer 2

我之前从未使用过Vue.js. 但看看如何在他们的网站上，这似乎工作

在Vue风格指南中有关于道具命名的建议 https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended

＆＃13;

Vue.component('dynamsoft-component', {
  props: ['onAppSend'],
  template: '<button v-on:click="buttonclick">click me</button>',
  methods: {
    buttonclick(e){
      // Check if onAppSend is defined.
      if(Boolean(this.onAppSend)){
      	this.onAppSend();
      }
    }
  }
})

new Vue({
  el: '#app',
  methods: {
    onSend: function(){
      console.log('child clicked');
    }
  }
});

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <dynamsoft-component :on-app-send="onSend"></dynamsoft-component>
</div>

＆＃13;

Vue 2.0 - 如何将函数传递给子组件？

2 个答案: