Vue.js组件化笔记

局部调用

<template>
    <my-page></my-page>
</template>

<script>
import MyPage from "xxx/MyPage.vue"
export default {
    components: {
        MyPage
    }
}
</script>

传入参数

export default {
    props:{
        mvalue: {
            type: String,
            default: ''
        }
    }
}

调用：

<template>
    <my-page :mvalue="value"></my-page>
</template>

<script>
import MyPage from "xxx/MyPage.vue"
export default {
    components: {
        MyPage
    },
    data() {
        return {
            value:'',
        };
    }
}
</script>

“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项

子组件事件回调

<my-car-choise @onselect="onSelectCarSubmit" :mtoken="mtoken" ref="myCarChoise"></my-car-choise>

onSelectCarSubmit(row){
    xxx
},

onselect(index,row){
    this.$emit('onselect',row);
},

子组件内部事件调用

<my-car-choise ref="myCarChoise"></my-car-choise>
this.$refs.myDriverChoise.xx();

$refs直接从索引获取到子组件，然后就可以调用各个子组件的方法了。 添加索引方法是：在标签里添加ref=索引名 调用组件方法是：this.$ref.索引名
也可以直接在父组件中使用this.$ref.索引名
这个时候，就可以获得组件了，然后通过组件可以调用他的方法，或者是使用其数据。