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.索引名
这个时候，就可以获得组件了，然后通过组件可以调用他的方法，或者是使用其数据。