在按鈕上單擊組件內部，調用父方法。 怎么樣？
[英]On button click inside component, call parent method. How?
問題描述
下面是一個包含3個notify()方法的功能App。
第一個notify()方法在組件索引中找到。
第二個notify()方法在組件登錄中找到。
在父App實例中找到第三個notify()方法。
題：
如何從登錄按鈕單擊調用父App實例中找到的第三個notify() ？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple Vue.js Router Example</title> <!-- VUE JS v2.6.1 --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- VUE ROUTER JS v3.1.3 --> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!-- BOOTSTRAP CSS v4.3.1 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- GOOGLE FONT CSS - Roboto Mono --> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet"> <!-- GOOGLE FONT CSS - Material Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- CSS --> <style type="text/css"> body { font-family: 'Roboto Mono', monospace; font-weight: 400; font-size: 1rem; background-color: #d7ccc8; } .active { color: MediumSeaGreen; } .exactActive { color: #e57373; } </style> </head> <body> <!-- HTML --> <!-- VUE APP - PARENT CONTAINER --> <div id="app" class="container"> <!-- HEADER CONTAINER --> <header> <!-- LINKS --> <!-- ROUTER LINK(S) --> <ul> <li> <router-link tag="a" to="/" exact>/index</router-link> </li> <li> <router-link tag="a" to="/sign-in">/sign-in</router-link> </li> </ul> <!-- VIEWS --> <!-- ANY OF THESE CAN/DO OR DO NOT RENDER --> <!-- DEPENDS ON ROUTER-LINK SELECTED --> <router-view name="RTV_index"></router-view> <router-view name="RTV_sign_in"></router-view> </header> </div> <!-- JAVASCRIPT --> <!-- JAVA SCRIPT --> <script type="text/javascript"> // DISABLE Vue.config.productionTip = false; // DISABLE Vue.config.devtools = false; /* COMPONENTS */ // COMPONENT INDEX const CPT_index = { template: ` <!-- HTML PARENT CONTAINER --> <div style="background-color: #bcaaa4;"> <strong>Component:</strong> CPT_index <br> <strong>Route :</strong> ./ <br> <strong>Params:</strong> none <br> <button type="button" v-on:click="notify()">NOTIFY</button> </div> `, // COMPONENT SIGN IN - METHODS methods:{ notify: function() { console.log('Hi! I am a method inside a local component CPT_index.'); } } }; // COMPONENT SIGN IN const CPT_sign_in = { template: ` <!-- HTML PARENT CONTAINER --> <div style="background-color: #bcaaa4;"> <strong>Component:</strong> CPT_sign_in <br> <strong>Route :</strong> ./sign-in <br> <strong>Params:</strong> none <br> <button type="button" v-on:click="notify()">NOTIFY</button> </div> `, // COMPONENT SIGN IN - METHODS methods:{ notify: function() { console.log('Hi! I am a method inside a local component CPT_sign_in.'); } } }; // COMPONENT 404 const CPT_404 = { template: ` <!-- HTML PARENT CONTAINER --> <div style="background-color: #ef9a9a;"> <strong>CPT_404</strong> <br> <strong>Route :</strong> ./404 <br> <strong>Params:</strong> none </div> ` } /* ROUTER */ // VUE.JS ROUTER INSTANCE const router = new VueRouter({ // IN THIS ROUTE I WILL RENDER THESE COMPONENTS.. // ROUTER MODE - hash, history mode: 'hash', base: '/', // CSS FOR ROUTER-LINK ACTIVE linkActiveClass: "active", // CSS FOR ROUTER-LINK exact ACTIVE linkExactActiveClass: "exactActive", // ROUTES(S) TO EVALUATE IN ORDER routes: [ /* ROUTES */ // ROUTE INDEX { name: 'index', path: '/', // ROUTE(S) WITH COMPONENT(S) TO RENDER IN ORDER components: { // ONE OR MORE... RTV_index: CPT_index, } }, // END ROUTE INDEX // -------------------------------------------------------------------------------- // ROUTE SIGN IN { name: 'sign_in', path: '/sign-in', // ROUTE(S) WITH COMPONENT(S) TO RENDER IN ORDER components: { // ONE OR MORE... RTV_sign_in: CPT_sign_in, } }, // END ROUTE SIGN IN // -------------------------------------------------------------------------------- /* REDIRECT */ // ROUTE REDIRECT { name: null, path: '*', redirect: { name: '404' }, // TRAP ANY UNDEFINED ROUTE AND... // FORWARD IT TO /404 ROUTE }, // END ROUTE REDIRECT /* TO /404 */ // ROUTE 404 { name: '404', path: '/404', // ROUTE COMPONENT(S) TO RENDER IN ORDER components: { // ONE OR MORE... RTV_404: CPT_404, } }, // END ROUTE 404 ] // END ROUTES(S) TO EVALUATE IN ORDER }); /* APP */ // VUE.JS APP INSTANCE const App = new Vue({ // ROOT ELEMENT el: '#app', // ROUTER router, /* DATA */ // APP DATA (SINGLE SOURCE OF TRUTH) data: { data0: true, data1: 'Data1 - Rendered successfuly.', data2: 'Data2 - Rendered successfuly.', data3: 'Data3 - Rendered successfuly.', }, /* COMPUTED */ // COMPUTED PROPERTIES computed: { }, /* METHODS */ // APP METHODS methods:{ //Initialize App. init: function() { console.log('App initialized.'); if (this.supportsLocalSessionStorage()) { console.log('HTML5 localStorage & sessionStorage Supported.'); } else { console.error('Fatal Error: No HTML5 localStorage & sessionStorage support.'); } }, // HTML5 Local & Session sotrage detection supportsLocalSessionStorage: function() { return typeof(Storage) !== 'undefined'; }, notify: function() { console.log('Hi! I am a method inside the parent instance App.'); } }, // END APP METHODS /* HOOKS */ // APP LIFE CYCLE HOOKS mounted(){ this.$nextTick(function () { // Code that will run only after the // entire view has been rendered // Initialize App this.init(); }) } }); </script> </body> </html>
2 個解決方案
解決方案1
3 已采納 2019-09-09 17:51:14
要實現您所尋找的目標，您只需更改：
<button type="button" v-on:click="notify()">NOTIFY</button>
至
<button type="button" v-on:click="$parent.notify()">NOTIFY</button>
但是，由於“父”是您可以實際調用的$ root組件：
<button type="button" v-on:click="$root.notify()">NOTIFY</button>
這將解決使用父母的以下問題。 在調用$ parent時，您將耦合組件層次結構，這將使重用這些組件變得困難。 您可能需要考慮使用$ emit的事件驅動系統。
<button type="button" v-on:click="$emit('notify')">NOTIFY</button>
然后在任何父組件上，你會像這樣監聽'notify'：
mounted () {
this.$on('notify', (event) => {
// do something in your case it would be
this.notify()
})
}
您可能還想考慮實現事件總線以從應用程序的任何位置捕獲事件。
一個簡單的例子是：
在main.js中添加：
Vue.prototype.$bus = new Vue
在組件中添加：
<button type="button" v-on:click="$bus.$emit('notify')">NOTIFY</button>
然后在任何其他組件中添加：
mounted () {
this.$bus.$on('notify', (event) => {
// do something in your case it would be
})
}
希望這可以幫助！
解決方案2
0 2019-09-10 16:09:21
我已更新原始示例以反映所有更改。 我們現在有一個原型事件總線，為了清楚起見，重新標記了組件和方法。 這個功能示例應該讓您基本了解Vue路由器，路由，本地組件，事件總線和簡單的axios get請求。
如果你有SublimeText 3，我已經添加了看起來很棒的ASCII注釋。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple Vue.js Router Example</title> <!-- VUE JS v2.6.1 --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- VUE ROUTER JS v3.1.3 --> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!-- AXIOS JS v0.19.0 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- BOOTSTRAP CSS v4.3.1 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- GOOGLE FONT CSS - Roboto Mono --> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet"> <!-- GOOGLE FONT CSS - Material Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- CSS --> <style type="text/css"> body { font-family: 'Roboto Mono', monospace; font-weight: 400; font-size: 1rem; background-color: #d7ccc8; } .active { color: MediumSeaGreen; } .exactActive { color: #e57373; } </style> </head> <body> <!-- ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## --> <!-- ## ## ######## ## ## ## ## ## ## ### ### ## ## ## ## #### #### ## ######### ## ## ### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## --> <!-- VUE APP - PARENT CONTAINER --> <div id="app" class="container"> <!-- HEADER CONTAINER --> <header> <hr> <h4>Static Nav</h4> <p>by router-link</p> <!-- ######## ####### ## ## ######## ######## ######## ## #### ## ## ## ## ###### ## ## ## ## ## ## ## ## ## ## ## ## ### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ## ## ######## ## ## ## ## ## ###### ######## ## ## ## ## ## ##### ###### ## ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ### ## ## ## ## ## ## ####### ####### ## ######## ## ## ######## #### ## ## ## ## ###### --> <!-- ROUTER LINK(S) --> <ul> <li> <router-link tag="a" to="/" exact>/index</router-link> </li> <li> <router-link tag="a" to="/sign-in">/sign-in</router-link> </li> <li> <router-link tag="a" to="/404">/404</router-link> </li> </ul> <!-- ######## ####### ## ## ######## ######## ######## ## ## #### ######## ## ## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ## ## ## ## ## ###### ######## ## ## ## ###### ## ## ## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ####### ####### ## ######## ## ## ### #### ######## ### ### ###### --> <!-- ANY OF THESE CAN/DO OR DO NOT RENDER --> <!-- RELATIVE TO ROUTER-LINK CURRENTLY SELECTED --> <router-view name="RTV_index"></router-view> <router-view name="RTV_sign_in"></router-view> <router-view name="RTV_404"></router-view> </header> </div> <!-- ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## --> <!-- ## ### ## ## ### ###### ###### ######## #### ######## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ## ######## ## ## ## ######### ## ## ######### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ## ### ## ## ###### ###### ## ## #### ## ## --> <!-- JAVA SCRIPT --> <script type="text/javascript"> // DISABLE Vue.config.productionTip = false; // DISABLE Vue.config.devtools = false; /* ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## */ /* ###### ####### ## ## ######## ####### ## ## ######## ## ## ######## ###### ## ## ## ## ### ### ## ## ## ## ### ## ## ### ## ## ## ## ## ## ## #### #### ## ## ## ## #### ## ## #### ## ## ## ## ## ## ## ### ## ######## ## ## ## ## ## ###### ## ## ## ## ###### ## ## ## ## ## ## ## ## ## #### ## ## #### ## ## ## ## ## ## ## ## ## ## ## ## ### ## ## ### ## ## ## ###### ####### ## ## ## ####### ## ## ######## ## ## ## ###### */ // COMPONENT INDEX const componentIndex = { // HTML TEMPLATE template: ` <!-- HTML PARENT CONTAINER --> <div style="background-color: #bcaaa4;"> <strong>Component:</strong> componentIndex <br> <strong>Route :</strong> ./ <br> <strong>Params:</strong> none <br> <button type="button" v-on:click="componentMethod1()">componentMethod1()</button> </div> `, // COMPONENT SIGN IN - DATA data: function () { return { componentDataInt: 0, componentDataString: 'A', componentDataArray: [], componentDataObject: {}, } }, // COMPONENT SIGN IN - METHODS methods:{ componentMethod1: function() { console.info('componentMethod1() inside local componentIndex called.'); } } }; // COMPONENT SIGN IN const componentSignIn = { template: ` <!-- HTML PARENT CONTAINER --> <div style="background-color: #bcaaa4;"> <strong>Component:</strong> componentSignIn <br> <strong>Route :</strong> ./sign-in <br> <strong>Params:</strong> none <br> <button type="button" v-on:click="componentMethod1()">componentMethod1() -> appMethod1()</button> </div> `, // COMPONENT DATA data: function () { return { componentDataInt: 0, componentDataString: 'A', componentDataArray: [], componentDataObject: {}, } }, // COMPONENT SIGN IN - METHODS methods:{ // COMPONENT METHOD 1 componentMethod1: function() { // EMIT A CALL TO A PARENT APP METHOD // this approach assures that our components remain decoupled from the app // so they can be re-used. // eg. We do not use $parent.appMenthod1() inside the button click; we instead, // emmit a call to this app method using our Vue prototype Event Bus. console.info('componentMethod1() inside local componentSignIn called.'); this.$appEventBus.$emit('appMethod1'); } } }; // COMPONENT 404 const component404 = { template: ` <!-- HTML PARENT CONTAINER --> <div style="background-color: #ef9a9a;"> <strong>Component:</strong> component404 <br> <strong>Route :</strong> ./404 <br> <strong>Params:</strong> none </div> `, // COMPONENT DATA data: function () { return { componentDataInt: 0, componentDataString: 'A', componentDataArray: [], componentDataObject: {}, } }, // COMPONENT 404 - METHODS methods:{ // COMPONENT METHOD 404 componentMethod404: function() { // DEBUG console.log('componentMethod404 called.'); } } }; /* ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## */ /* ######## ####### ## ## ######## ######## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ## ## ## ## ## ###### ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ####### ####### ## ######## ## ## */ // VUE.JS ROUTER INSTANCE const router = new VueRouter({ // IN THIS ROUTE I WILL RENDER THESE COMPONENTS.. // ROUTER MODE - hash, history mode: 'hash', base: '/', // CSS FOR ROUTER-LINK ACTIVE linkActiveClass: "active", // CSS FOR ROUTER-LINK exact ACTIVE linkExactActiveClass: "exactActive", // ROUTES(S) TO EVALUATE IN ORDER routes: [ /* ######## ####### ## ## ######## ######## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ## ## ## ## ## ###### ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ####### ####### ## ######## ###### */ // -------------------------------------------------------------------------------- // ROUTE INDEX { name: 'index', path: '/', // ROUTE(S) WITH COMPONENT(S) TO RENDER IN ORDER components: { // ONE OR MORE... RTV_index: componentIndex, } }, // END ROUTE INDEX // -------------------------------------------------------------------------------- // ROUTE SIGN IN { name: 'sign_in', path: '/sign-in', // ROUTE(S) WITH COMPONENT(S) TO RENDER IN ORDER components: { // ONE OR MORE... RTV_sign_in: componentSignIn, } }, // END ROUTE SIGN IN // -------------------------------------------------------------------------------- /* ######## ######## ######## #### ######## ######## ###### ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ###### ## ## ## ######## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ######## #### ## ## ######## ###### ## */ // ROUTE REDIRECT { name: null, path: '*', redirect: { name: '404' }, // TRAP ANY UNDEFINED ROUTE AND... // FORWARD IT TO /404 ROUTE }, // END ROUTE REDIRECT // -------------------------------------------------------------------------------- /* ######## ####### ## ## ##### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######### ## ## ######### ## ## ## ## ## ## ## ## ## ####### ## ## ##### ## */ // ROUTE 404 { name: '404', path: '/404', // ROUTE COMPONENT(S) TO RENDER IN ORDER components: { // ONE OR MORE... RTV_404: component404, } }, // END ROUTE 404 ] // END ROUTES(S) TO EVALUATE IN ORDER }); /* ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## */ /* ### ######## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ######## ######### ## ## ## ## ## ## ## ## ## ## */ // Implement an appEventBus to capture events // ...from anywhere in our application. // We make it available to each Vue instance by // ...defining them on the prototype: Vue.prototype.$appEventBus = new Vue(); // VUE.JS APP INSTANCE const App = new Vue({ // ROOT ELEMENT el: '#app', // ROUTER router, // -------------------------------------------------------------------------------- /* ### ######## ######## ######## ### ######## ### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ######## ## ## ## ## ## ## ## ######### ## ## ## ## ######### ## ######### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ## ## ## ## ## */ // APP DATA (SINGLE SOURCE OF TRUTH) data: { dataInt: 0, dataString: 'A', dataArray: [], dataObject: {}, }, // -------------------------------------------------------------------------------- /* ###### ####### ## ## ######## ## ## ######## ######## ######## ## ## ## ## ### ### ## ## ## ## ## ## ## ## ## ## ## #### #### ## ## ## ## ## ## ## ## ## ## ## ## ### ## ######## ## ## ## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ####### ## ## ## ####### ## ######## ######## */ // COMPUTED PROPERTIES computed: { // INFO... computed1: function() { return true; } }, // -------------------------------------------------------------------------------- /* ## ## ### ######## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######### ## ## ## ######### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ### ### ## ## ## ###### ## ## */ // WATCH PROPERTIES wath: { // INFO... watch1: function() { return true; } }, // -------------------------------------------------------------------------------- /* ## ## ######## ######## ## ## ####### ######## ###### ### ### ## ## ## ## ## ## ## ## ## ## #### #### ## ## ## ## ## ## ## ## ## ## ### ## ###### ## ######### ## ## ## ## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ## ## ## ####### ######## ###### */ // APP METHODS methods:{ // INITIALIZE APP init: function() { // DEBUG console.log('App initialized.'); // HTML5 - LOCAL & SESSION STORAGE CHECK if (this.supportsLocalSessionStorage()) { // DEBUG console.log('HTML5 localStorage & sessionStorage Supported.'); } else { // DEBUG console.error('Fatal Error: No HTML5 localStorage & sessionStorage support.'); } }, // HTML5 - LOCAL & SESSION STORAGE DETECTION supportsLocalSessionStorage: function() { return typeof(Storage) !== 'undefined'; }, // APP METHOD 1 appMethod1: function(event) { // DEBUG console.log('appMethod1() called.'); console.info('axios request started...'); // AXIOS GET REQUEST axios.get('https://jsonplaceholder.typicode.com/users') // handle success .then(function (response) { console.info('axios response:'); // LOOP THORUGH RESPONDE DATA ARRAY OF OBJECTS response.data.forEach(function (item, index) { // DEBUG console.log(index, item.name); }); }) // handle error .catch(function (error) { console.error('axios error:', error); }) // always executed .finally(function () { console.info('axios request complete.'); }); } }, // END APP METHODS // -------------------------------------------------------------------------------- /* ## #### ######## ######## ###### ## ## ###### ## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ## ## ## ###### ###### ## ## ## ## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## #### ## ######## ###### ## ###### ######## ######## ## ## ####### ####### ## ## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######### ## ## ## ## ##### ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ####### ####### ## ## ###### */ // APP LIFE CYCLE HOOKS mounted(){ // Our mounted hook doesn't guarantee that the whole component tree renders. // so we use nextTick this.$nextTick(function () { // The whole view is now rendered, so we can safely access or query // the DOM. // Initialize App this.init(); }); // EventBus now listening for $emit('appMethod1') // coming from ANY v-on:event ANYwhere. this.$appEventBus.$on('appMethod1', (event) => { // DEBUG console.log('EventBus used to call a parent method.'); // CALL APP METHOD 1 this.appMethod1(); }); }, // -------------------------------------------------------------------------------- }); </script> </body> </html>
測試功能組件內的click事件的功能/方法調用
[英]Testing for a function/method call on click event inside a functional component
如何從 javascript（.js 文件）按鈕單擊事件調用或觸發 Angular 組件方法
[英]How to call or trigger Angular component method from javascript (.js file) button click event
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.