首先看父传子
自定义一个子组件
<template>
<div>
子组件:
<span>{{inputName}}</span>
</div>
</template>
<script>
export default {
//接收父组件传递的数据
props: {
inputName: String,
},
}
</script>
<style>
</style>
定义一个父组件,并且在父组件里面引用子组件,挂载子组件,使用子组件
<template>
<div>父组件:
<input type="text"
v-model="name">
<br>
<br>
<!-- 引入子组件 -->
<child v-bind:inputName="name"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child,
},
data() {
return {
name: '',
}
},
}
</script>
<style>
</style>
测试结果:
可以看到父输入框输入,子组件成功接收到父组件传的值。ヾ(◍°∇°◍)ノ゙
子传父
子组件
<template>
<div>
子组件:
<input type="text"
v-model="childValue">
<!-- 定义一个子组件传值的方法 -->
<input type="button"
value="点击触发"
@click="childClick">
</div>
</template>
<script>
export default {
data() {
return {
childValue: '我是子组件的数据',
}
},
methods: {
childClick() {
// childByValue是在父组件on监听的方法
// 第二个参数this.childValue是需要传的值
this.$emit('childByValue', this.childValue)
},
},
}
</script>
父组件
<template>
<div>
父组件:
<input type="text"
v-model="name">
<br>
<br>
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<Child v-on:childByValue="childByValue"></Child>
</div>
</template>
<script>
import Child from '@/components/Child.vue'
export default {
components: {
Child,
},
data() {
return {
name: '',
}
},
methods: {
childByValue(childValue) {
// childValue就是子组件传过来的值
this.name = childValue
},
},
}
</script>
结果如下:
子组件传值给父组件成功啦ヾ(◍°∇°◍)ノ゙
手机扫一扫
移动阅读更方便
你可能感兴趣的文章