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>
posted @ 2019-10-30 11:53  咱也不敢问  阅读(198)  评论(0编辑  收藏  举报