vue父子组件传值

1、父组件向子组件传值

子组件通过props接收父组件传过来的值

<template>
    <div class="header"> 
        <span>{{farter}}</span>
    </div>
</template>

<script>
export default {
    name:"erzi",
    props:[
        type: String,   //为变量定义一个类型
      default: 'hello world'   //为变量设置默认值
    }
    ],
    data() {
        return {
            
        }
    },
}
</script>

父组件通过v-bind向子组件传值

<template>
  <child :farter="hello"></child>
</template>
<script>
import child from './components/child'
export default {
  components: {
    child
  },
  data () {
    return {
      hello: '我是父组件的值'
    }
  }
}
</script>

子组件就可使用父组件的值了，子组件不需要在data里面添加变量

2、子组件给父组件传值

子组件通过触发方法使用$emit()触发事件，把filmName传给父组件。

<template>
    <div>
        <span>电影名:</span>
        <input type="text" v-model="filmName" @childFn="change">
    </div>
</template>
<script>
export default {
    name:'erzi',
    data() {
        return {
            filmName
        }
    },
    methods: {
        change(){
            this.$emit("childFn",this.filmName)   //通过$emit把值传给父组件  第一个参数为方法父组件方法名，第二个为传递的值
        }
    },
}
</script>

父组件声明一个方法，通过childFn接收这个值，触发change得到这个值

<!-- 父组件 -->
<template>
  <div class="test">
    <child @childFn="change"></child>
    <br />
    子组件传来的值 : {{ message }}
  </div>
</template>

<script>
import child from './components/child'
export default {
  components: {
    child
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    change (filmName) {
      this.message = filmName
    }
  }
}
</script>