Vue-cli父子组件之间传参

一.父传子(

先写父组件

父组件

<template>
<子组件 :子组件的变量名='父组件的变量'> </子组件> //子组件的变量名前的冒号千万别丢了有和没有是两种意思
</template><script>
.......//没用的内容我省略了
data(){
return {父组件的变量:1}
}
</script>


子组件

<template>
<inpu type='text' v-model='子标签的变量名'/>
</template>
<script>
.......//没用的内容我省略了
props:['子标签的变量名'] //而不是写data里
</script>


二.子传父

先写子组件

子组件

<template>
<button @click='子组件的方法'>
子传父
</button>
</template>
<script>
.......//没用的内容我省略了
data(){return {子组件变量:1}}
methods:{
子组件的方法(){
this.$emit('父组件中的方法名',this.子组件变量)
}
}
</script>


父组件

<template>
<button @emit中定义的方法名='父组件的函数'>
子传父
</button>
</template>
<script>
.......//没用的内容我省略了
methods:{
父组件的函数(msg){
console.log(msg) //这里msg就是this.子组件变量
}
}
</script>