一.父传子(
先写父组件
父组件
代码语言:javascript复制<template>
<子组件 :子组件的变量名='父组件的变量'> </子组件> //子组件的变量名前的冒号千万别丢了有和没有是两种意思
</template>
<script>
.......//没用的内容我省略了
data(){
return {父组件的变量:1}
}
</script>
子组件
代码语言:javascript复制<template>
<inpu type='text' v-model='子标签的变量名'/>
</template>
<script>
.......//没用的内容我省略了
props:['子标签的变量名'] //而不是写data里
</script>
二.子传父
先写子组件
子组件
代码语言:javascript复制<template>
<button @click='子组件的方法'>
子传父
</button>
</template>
<script>
.......//没用的内容我省略了
data(){return {子组件变量:1}}
methods:{
子组件的方法(){
this.$emit('父组件中的方法名',this.子组件变量)
}
}
</script>
父组件
代码语言:javascript复制<template>
<button @emit中定义的方法名='父组件的函数'>
子传父
</button>
</template>
<script>
.......//没用的内容我省略了
methods:{
父组件的函数(msg){
console.log(msg) //这里msg就是this.子组件变量
}
}
</script>