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

Question

I have one issue. I want to pass function link to the child component. It's working but in HTML I get that code. It's correct how improve it?

I have Vue instance

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

I want to add from global window any function. Or register function in Vue instance

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

And pass this function to child

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

But I get this HTML template in console

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

Answer 1

You example code is not making a lot of sense - do you want to add a listener not a div or pass a function to a child component?`

I assume the latter. Vue has custom events for that .

Parent template:

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

Parent component methods:

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

And then emit form the child:

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

---

Edit:

I still don't see how those functions would end up directly in the template, but the real problem is: HTML is not case-sensitive. so :onAppSend becomes :onappsend . You have to use kebap-case: :on-app-send . Vue will convert it to onAppSend in the component.

Answer 2

I have never used Vue.js before now..
But having a look at the how to on their site, this seems to work

In Vue style guide have recommendations about props naming https://v2.vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended

 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'); } } });

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