父子组件传值，甚至传事件！iview公用分页的封装使用

1.父组件向子组件传值

子组件

<template>
  <div class="toast">{{tip}}</div>
</template>

<script>
  export default {
    name: "toast",
    props:{
      tip:String,
    },
  }
</script>

父组件

<template>
  <Toast :tip="tip" />
</template>

<script>
  import Toast from '../../components/Toast'

export default {
    name: "selectionNotice",
    components:{
      Toast
    },
}
</script>

2.父组件把方法传入子组件中，在子组件里直接调用这个方法。

父组件

<template>
  <div class="father">
     <child :fatherMethod="clickMe"></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  components: {
    child
  },
  data () {
    return {}
  },
  methods: {
    clickMe () {
      console.log('clicked')
    }
  }
}
</script>

子组件

<template>
  <div class="page-main-box">
    <Page :total="100" size="small" @on-change="fatherMsg" />
  </div>
</template>

<script>
    export default {
        name: "BottomPages",
        props: {
          fatherMsg:{
            type:Function,
            default:null
          } 
        },
        methods:{

        }
    }
</script>

父组件

<template>
  <div class="parent-box">
      <BottomPages :fatherMsg="handle" />
  </div>
</template>

<script>
<script>
  import BottomPages from '../../components/BottomPages'

export default {
    name: "selectionNotice",
    components:{
      BottomPages
    },
    methods:{
       //分页页数改变
      handle(){
        console.log('test');
      }
    }
}
</script>