サブアセンブリを使用して、親コンポーネントメソッド
children.vueサブアセンブリ
良い方法のサブアセンブリ内の親コールを定義することができる:サブコンポーネントchildMethod()
<template>
<div>我是子组件Children</div>
</template>
<script>
export default {
data(){
return {
age: 0
}
},
methods:{
childMethod() {
this.age += 1
}
}
}
</script>
親コンポーネントparent.vue
親コンポーネント:によってサブアセンブリの缶に参照を追加this.$refs.ref.method
呼び出します
<template>
<div @click="parentMethod">
<children ref="child"></children>
</div>
</template>
<script>
import children from 'components/children/children.vue'
export default {
data(){
return {
}
},
components: {
'children': children
},
methods:{
parentMethod() {
this.$refs.child.childMethod();
}
}
}
</script>
第二に、親のサブアセンブリ組立方法の使用
サブアセンブリchildren.vue
サブコンポーネント:によってthis.$emit
外部トリガshowメソッドは、パラメータを運ぶことができます
<template>
<div>
<h1>子组件</h1>
<Button @click="sonClick">触发父组件方法</Button>
</div>
</template>
<script>
export default {
data () {
return {
sonMessage: '子组件数据sonMessage',
sonData: '子组件数据sonData'
};
},
methods: {
sonClick () {
this.$emit('show', this.sonMessage, this.sonData);
}
}
}
</script>
親コンポーネントparent.vue
方法は、サブコンポーネントにサブコンポーネントを監視:親コンポーネントを @show
<template>
<div>
<h1>父组件</h1>
<children @show="showFather"></children>
</div>
</template>
<script>
import children from 'components/children/children.vue'
export default {
data () {
return {
}
},
methods: {
showFather (a, b) {
console.log('触发了父组件的方法:' + a + '---' + b);
}
}
}
</script>