依賴注入

簡單就一句話--子組件調(diào)用祖宗組件的方法（中間不管嵌套了多少層!!!）

<!DOCTYPE html>
<html>

<head>
    <title>作用域插槽</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
 

<body> 
    <div id='app'>
      <my-component></my-component>  
    </div>
</body>

</html>

 
<script type="text/javascript">
    Vue.component('my-component', {
      template: `
        <div>
          <button @click='toFatherHandle'>點(diǎn)擊訪問父級(jí)的方法</button>
        </div>
      `,
      inject: ['fatherHandle'],
      methods: {
        toFatherHandle () { // 調(diào)用父級(jí)的方法
          this.fatherHandle('##我是傳過來的參數(shù)##')
        }
      }
    })

    new Vue({
        el:'#app',
        data:{
          
        },
        provide: function () {
          return {
            fatherHandle: this.fatherHandle
          }
        },
        methods: {
          fatherHandle (e) { // 調(diào)用父級(jí)的方法
            console.log(e,'我是父級(jí)的方法....')
          }
        }
    })
     
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容