Vue父子组件传值
1.父传子(props)
需要在vue实例中添加props事件,如下所示
父组件template
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<div>{
{ message }}</div>
父组件:
<input type="text" v-model="name">
<br>
<br>
<!-- 引入子组件 -->
<HelloWorld :inputName="name"></HelloWorld>
</div>
</template>
父组件js
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return {
name: '',
}
},
components: {
HelloWorld
},
}
</script>
子组件
<template>
<div class="hello">
子组件:
<span>{
{
inputName}}</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
inputName: String
}
}
</script>
2.子传父
父组件template
<template>
<div>
父组件:
<span>{
{name}}</span>
<br>
<br>
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<HelloWorld v-on:childByValue="childByValue"></HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data () {
return {
name: ''
}
},
methods: {
childByValue: function (childValue) {
// childValue就是子组件传过来的值
this.name = childValue
}
}
}
</script>
子组件
<template>
<div>
子组件:
<span>{
{
childValue}}</span>
<!-- 定义一个子组件传值的方法 -->
<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>
3.子传子