【Vue.js学习笔记】13：属性传值(父传子),事件传值(子传父)

属性传值(父传子)

简述

属性传值即父组件向子组件传值。有些属性可能有多个子组件要使用，这种时候总不能每个组件里都写一遍，这时候就可以把这样的属性放到父组件里，然后通过属性传值的方式传递给要使用它的子组件里去使用。

这个例子是在上篇的基础上的，为了突出重点这里只贴出修改的部分的代码，其余部分是一样的。

App.vue的script(数据)

将之前放在子组件里的属性放到这里来。

<script>
  import Users from './components/Users'
  import Header from './components/Header'
  import Footer from './components/Footer'

  export default {
    name: 'App',
    components: {
      "users": Users,
      "app-header": Header,
      "app-footer": Footer
    },
    data(){
      return{
        //这次将数据放到父组件中,因为这组数据可能有很多子组件要用
        users: [
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
        ]
      }
    }
  }
</script>

App.vue的template(传递)

父组件和子组件耦合的地方就在这里，在这里做属性传值。

<template>
  <div id="app">
    <app-header></app-header>
    <!--在调用子组件时为其绑定一个自定义的属性,将要传递的数据传进去-->
    <users v-bind:users="users"></users>
    <app-footer></app-footer>
  </div>
</template>

Users.vue的script(接收)

在这里取出来，注意这里props有简写形式和正规写法。

<script>
  export default {
    name: "Users",
    //在这里取出父组件绑定的属性
    // props: ["users"],
    //上面是简写,下面是正规写法
    props: {
      users: {
        type: Array,
        required: true
      },
    },
    data() {
      return {
        //这里的数据被剪切掉了,放到了父组件里
      }
    }
  }
</script>

Users.vue的template(使用)

因为传递的属性名还是叫users，所以取出来的名字还是users，所以template部分的代码没有改动。

运行结果

和上篇的结果一样。

传值和传引用

前面说的“属性传值”其实也包含了“引用值”，是一个广义的说法。这里区分一下传值和传引用，传引用在js里也就是传Array或者传Object，其它的都是传值。

需要注意一下传引用的时候，改了引用对象的值，则其它引用这个的地方也就跟着改变了。

事件传值(子传父)

简述

事件传值即子组件向父组件传值。课程视频里演示了从子组件传值到父组件，再传回两个子组件中，这里只演示子向父传递的这样一个过程。

Header.vue的template

<template>
  <header v-on:click="changeTitle">
    点我向父组件传值
  </header>
</template>

Header.vue的script(注册事件)

<script>
  export default {
    name: "Header",
    methods: {
      changeTitle: function () {
        //注册事件("事件名称",要传递的内容)
        this.$emit("titleChanged", "子传父");
      }
    }
  }
</script>

App.vue的template(事件触发方法)

<template>
  <div id="app">
    <!--在这里声明,当titleChanged事件触发时所调用的方法,并在这里接收事件参数-->
    <app-header v-on:titleChanged="updateTitle($event)"></app-header>
    {{title}}
    <app-footer></app-footer>
  </div>
</template>

App.vue的script(事件处理)

<script>
  import Users from './components/Users'
  import Header from './components/Header'
  import Footer from './components/Footer'

  export default {
    name: 'App',
    components: {
      "users": Users,
      "app-header": Header,
      "app-footer": Footer
    },
    data() {
      return {
        title: "App.vue的默认title"
      }
    },
    methods: {
      //在这里实现一下事件发生时调用的方法
      updateTitle(e) {
        this.title = e;
      }
    }
  }
</script>

可以看到事件传值是，在子组件中当某个函数执行时注册了一个事件（或者说引发了一个事件），并将要传递的值传给了这个事件，在父组件中为该事件绑定了相应的处理方法，在处理方法中就可以取出传递过来的值了。

运行结果

在这里插入图片描述