vue父子组件传值

1、父传子

传参页面

<template>

    <div id="app">

      <p>父组件</p>

      <users :users="users"></users>//在父组件中显示子组件，将要传递的值绑定到子组件上

    </div>

</template>

<script>

import Users from '@/components/Users.vue'//把子组件注册到父组件中

export default {

  name: 'home',

  data () {

    return {

      users: ['henry', 'bucky', 'emuly'] //要传递到子组件的值

    }

  },

  components: {

    'users': Users //对子组件进行挂载，可以不用重命名

  }

}

</script>

 

接收参数页面

 

<template>

  <div>

    <p>子组件</p>

    <div class="hello">

      <ul>

        <li v-for="user in users"

            :key="user">{{user}}</li>//将接收到的参数进行循环展示，注意:key的使用，如果设置了eslint没有设置key会报错

      </ul>

    </div>

  </div>

</template>

<script>

export default {

  name: 'Son',

  data () {

    return {

 

    }

  },

  props: {

    users: {  // 必须传值，并且返回的值是数组

      type: Array,

      required: true

    }

  }

}

</script>

 关于props的定义

 props: {

 // 基础类型检测, null意味着任何类型都行

 propA: Number,

 // 多种类型

 propB: [String, Number],

 // 必传且是String

 propC: {

  type: String,

  required: true

 },

 // 数字有默认值

 propD: {

  type: Number,

  default: 101

 },

 // 数组、默认值是一个工厂函数返回对象

 propE: {

  type: Object,

  default: function() {

  console.log("propE default invoked.");

  return { message: "I am from propE." };

  }

 },

 // 自定义验证函数

 propF: {

  isValid: function(value) {

  return value > 100;

  }

 }

2、子传父

 

子元素

 

<template>

  <div>

    <p>子组件</p>

    <p @click="changeTitle">{{title}}</p>//注册点击事件，点击之后改变父元素的值

  </div>

</template>

<script>

export default {

  name: '',

  data () {

    return {

      title: '传参'

    }

  },

  methods: {

    changeTitle () {

      let data = {

        num: 123

      }

      this.$emit('titleChanged', data)//可以定义内容，也可以直接传参

    }

  }

}

</script>

 

父元素

 

<template>

  <div class="home">

    <div id="app">

      <users  @changeTitle ="updateTitle"></users>

      <!-- 与子组件changeTitle 自定义事件保持一致

       updateTitle($event)接受传递过来的文字 -->

      <h2>{{title}}</h2>

    </div>

  </div>

</template>

<script>

import Users from '@/components/Users.vue'

export default {

  name: 'home',

  data () {

    return {

      title: '传递的是一个值'

    }

  },

  components: {

    'users': Users

  },

  methods: {

    updateTitle (e) {

      console.log(e)

      this.title = e.num

    }

  }

}

</script>