
1.写一个简单的子组件main/index.vue:
- <template>
- <view>
-
- </view>
- </template>
-
- <script>
- export default {
- data(){
- return {
-
- }
- },
- onLoad(){
-
- },
- methods:{
- childMethod() {
- console.log('childMethod do...')
- }
- }
- }
- </script>
-
- <style>
-
- </style>
在子组件中有一个childMethod方法
2.在父组件中引用这个子组件的childMethod方法:
- <template>
- <view class="content">
- <mian-index ref="mainindex"></mian-index>
- <view @tap="dataAction">button</view>
- </view>
- </template>
- <script>
- import mainindex from '@/pages/main/index/index.vue'
- export default {
- data() {
- return {
-
- };
- },
- components:{
- 'mian-index':mainindex
- },
- onLoad(e) {
-
- },
- methods:{
- dataAction:function(){
- this.$refs.mainindex.childMethod();
- }
- }
- }
- </script>
-
- <style scoped>
- .content{
- width:100%;
- box-sizing: border-box;
- }
- </style>
首先,引入子组件文件,然后用ref给子组件一个id标识,然后通过this.$refs.mainindex.childMethod();调用子组件方法
评价