vue父子组件传值

1. 父组件向子组件传值

1. 创建一个两个组件，一个父组件，一个子组件，父组件定义如下：

<template>
      <div class='parent'>
            <child  :tableData='tableData'></child>
      </div>
</template>

<script>
  import child from './child.vue'
  export default {
      name: 'parent',
      components: { child },
      data () {
          return {
              tableData: [1,2,3,4,5,6]
          }
      }
  }
</script>

<style>
</style>

2. 子组件定义如下

<template>
      <div class='child'>
            <ul>
                <li v-for='(item, index) in tableData' :key='index'>{{ item }}</li>
            </ul>
      </div>
</template>

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

<style>
</style>

2. 子组件向父组件传值

1. 创建一个两个组件，一个父组件，一个子组件，子组件定义如下：

<template>
      <div class='child'>
            <child  @click='sendDataToParent'></child>
      </div>
</template>

<script>
  export default {
      name: 'child',
      data () {
          return {
              tableData: [1,2,3,4,5,6]
          }
      },
      methods: {
        sendDataToParent() {
           this.$emit('datas',this.$data.tableData);
        }
      }
  }
</script>

<style>
</style>

2. 父组件定义如下

<template>
      <div class='parent'>
            <child @datas='reciveData'></child>
      </div>
      <ul>
        <li v-for='(item, index) in tables' :key='index'>{{ item }}</li>
      </ul>
</template>

<script>
  import child from './child.vue'
  export default {
      name: 'parent',
      components: { child },
      data () {
          return {
              tables: []
          }
      },
     methods: {
        reciveData(data) {
          this.$data.tables = data
        }
      }
  }
</script>

<style>
</style>

3. 父组件调用子组件的方法

1. 创建一个两个组件，一个父组件，一个子组件，父组件定义如下：

<template>
      <div class='parent'>
            <child ref='child'></child>  //  调用子组件方法，必须加ref属性
            <p @click='getChildMethod'>调用子组件的方法</p>
      </div>
</template>

<script>
  import child from './child.vue'
  export default {
      name: 'parent',
      components: { child },
      data () {
          return {
              tableData: [1,2,3,4,5,6]
          }
      },
      methods: {
        // 此方法内，父组件内调用子组件的方法
        getChildMethod() {
            this.$refs.child.sayHi();
         }
      }
  }
</script>

<style>
</style>

2. 子组件定义如下

<template>
      <div class='child'>
            <ul>
                <li v-for='(item, index) in tableData' :key='index'>{{ item }}</li>
            </ul>
      </div>
</template>

<script>
  export default {
      name: 'child',
      data () {
          return {
              tableData: [1,2,3,4,5,6]
          }
      }，
      methods: {
          sayHi() {
              console.log('hello world!')
           } 
      }
  }
</script>

<style>
</style>