父组件往子组件传值

组件传值

一、在父组件中引入子组件

<test :obj="obj" v-if="show"/>

import test from './test/test'

export default {
  components: { 
    test
   }
 }

二、在父组件中定义data值

data () {
    return {
      show: false, // 控制子组件显示
      obj: {
        name: ''
      }
    }
  }

三、给子组件绑定属性值

<test :obj="obj" v-if="show"/>

四、子组件中定义props

export default {
  props: {
    obj: Object
  }
}

watch监听值变化

export default {
watch: {
obj: {
handler (n, o) {
console.log('子组件中的name值： ’ + n.name)
},
deep: true // 深度监听父组件传过来对象变化
}
}
}

代码

父组件

<template>
  <div>
    <button @click="controlShow(true)">显示子组件</button>
    <button @click="controlShow(false)">隐藏子组件</button>
    <button @click="testName('aaa')">子组件传值aaa</button>
    <button @click="testName('bbb')">子组件传值bbb</button>
    <test :obj="obj" v-if="show"/>
  </div>
</template>

<script>
import test from './test/test'

export default {
  name: 'HelloWorld',
  components: { 
    test
  },
  data () {
    return {
      show: false, // 控制子组件显示
      obj: {
        name: ''
      }
    }
  },
  methods: {
    testName (e) {
      this.obj.name = e
    },
    controlShow (e) {
      this.show = e
    }
  }
}
</script>

<style scoped>
</style>

子组件

<template>
  <div>
    <h1>我是子组件！！！</h1>
    name值为：{{obj.name}}
  </div>
</template>

<script>
export default {
  name: 'test',
  props: {
    obj: Object
  },
  data () {
    return {
    }
  },
  watch: {
    obj: {
      handler (n, o) {
        console.log('子组件中的name值： ' + n.name)
      },
      deep: true // 深度监听父组件传过来对象变化
    }
  }
}
</script>

<style scoped>
</style>

子组件往父组件传值

组件传值