vue 父子组件之间的传值

1.父子组件传值（父组件传值给子组件 需要子组件用props接收值）

父传子：当子组件作为标签在父组件中使用的时候（子组件不可修改父组件传过来的值）

传递：需要在子组件标签上用v-bind（或者：）来绑定所需要传的东西，

接收：然后在子组件内通过props来接收

子组件页面：

<template>
  <div class="app">
    <div>子组件接收到父组件的值：{{message}}</div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
    }
  },
  props: [ 'message' ],
}
</script>

父组件页面：

<template>
  <div class="app">
    <children :message="sss"></children>
  </div>
</template>

<script>
import children from '../../components/Live/live'
export default {
  name: '',
  data () {
    return {
      sss: '我是父组件的值要传给子组件'
    }
  },
  components: {
    children
  },
}
</script>

结果：

2.子组件传值给父组件（子组件通过this.$emit去传值给父组件

父组件通过事件来接收）

子传父：当子组件作为标签在父组件使用的时候，

传递：子组件通过this.$emit来传递

接收：在父组件内的子组件标签上通过v-on（或者@）来接收

子组件

<template>
  <div class="app">
    <button @click="btn">我是子组件的按钮 点击我将值传到现在的父组件中</button>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      message: '我是子组件的值'
    }
  },
  methods: {
    btn () {
      this.$emit('btn', this.message)//  参数一：参数名称，参数二为需要传递的值
    }
  },
  components: {},
  activated () {}
}
</script>

父组件

<template>
  <div class="app">
    <child @btn="handelEmit">
    </child>
    父组件接收子组件的值：{{message}}
  </div>
</template>

<script>
import child from '../../components/Live/childlive'
export default {
  name: '',
  data () {
    return {
      message: ''
    }
  },
  components: {
    child
  },

  methods: {
    handelEmit (message) {
      this.message = message//父组件接收子组件的值
    }
  },
  activated () {}
}
</script>

结果