vueの$emitを見終わったら使えます

2232 ワード

vueではコンポーネントのネストがよく使われていますが、初心者にとって、親子コンポーネントの通信はよく困っています.まだウェブサイトで例を探していますか.この編を見終わったら、あなたは使います.

//  
new Vue({
    el:"#app",
    data:{
        aaa:111,
        bbb:222
    },
    methods:{
        dosometing:function(msg){
            console.log(msg)
        }
    }
})
//  ：
Vue.component('child',{
        props:['aaa'],
        template:''
    });
//

レンダリングされた結果、propsに受け入れられていないデータはコンポーネント要素に直接バインドされます.

しかし、入力ボックスに入力するとdosometingは実行されず、バインドされたchangeイベントがバインドされていないことを示します.$emitを使うと

Vue.component('child',{
        props:['aaa'],
        template:"",
        methods:{
            childfun:function(){
                this.$emit('change');//    
            }
        }
    });
//

childfunメソッド内でthisを出力するとchangeの場合、結果はundefinedであり、changeメソッドがコンポーネントインスタンスの下にマウントされていないことを示します.$Emitはjqにおけるtriggerイベントに相当し,サブコンポーネントを用いて親コンポーネントをトリガする方法にすぎない.だから中のthisは親コンポーネントです.
しかし、親のイベントをトリガーするために$emitだけが実現できるわけではありません.

は、$parentによって親のイベント

を直接トリガすることができる.

Vue.component('child',{
        props:['aaa'],
        template:"",
        methods:{
            childfun:function(){
               this.$parent.change1(1111)
    };//      
            }
        }
    });

この方法は$emitと同じ効果を達成することができる.propsでパラメータの形で方法を伝えます

//  
new Vue({
    el:"#app",
    data:{
        aaa:111,
        bbb:222
    },
    methods:{
        dosometing:function(msg){
            console.log(msg)
        }
    }
})
//  ：
Vue.component('child',{
        props:['aaa'],
        template:'',
         childfun:function(){
                this.change1(1111)
    }
    });
//

もちろんこれは実行したいメソッドを実行しているが,メソッドがサブコンポーネントにマウントされているためメソッド内のthisはサブコンポーネントを指しているが,この場合はvm=new Vue({})を用いてthisの代わりにvmを用いて親コンポーネントデータを操作する目的を達成できる.

vue-cli 2.xプロジェクト最適化:ローカル静的ライブラリファイルの導入

Vueにおける非親子コンポーネントの値伝達の問題