vue知识总结第一篇vue组件的定义以及父子组件的传值。

Posted 2020-09-29

vue中是一个.vue结尾的vue文件其中包括<template>标签里边写html，而react是在render函数中.。script用来写js，style中用来写css。那么我们来看看vue是怎么写的吧

子组件中

1，用export default 导出子组件,其中标红的是用来父子组件传值的this.$emit(‘reChild‘)指发送一个自定事件到父组件中，父组件中只要在引入这个子组件标签的时候v-on:reChild="rece"其中rece为父组件中methods中的一个方法。　props表示用来接收父组件传递过来的值还可以对这个值进行类型的限制和默认值的设置。父组件只要在这个子组件的标签上用v-bind:data=‘aaa‘这个aaa是父组件中data中的一个变量，或者data=‘bbb’这时候data的值就是一个常量了。　

<template>
    <div>
    <div @click=‘toParent‘><div/>
    </div>
</template>


export default {
data(){},
methods:{
    toParent(){
    this.$emit(‘reChild‘);
    }
},
props:{
    data:{
        type:Object,
        default:{}
    }
}
}