vueJs父子组件通信

父子组件通信

  • 子组件是不能引用父组件或者Vue实例的数据的。
  • 但是,在开发中,往往一些数据确实需要从上层传递到下层:
  • 比如在一个页面中,我们从服务器请求到了很多的数据。
  • 其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
  • 这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。
    如何进行父子组件间的通信呢?Vue官方提到
    • 通过props向子组件传递数据
    • 通过事件向父组件发送消息

vueJs父子组件通信

父组件向子组件传递函数(props)

props的值有两种方式:

  • 方式一:字符串数组,数组中的字符串就是传递时的名称。
  • 方式二:对象,对象可以设置传递时的类型,也可以设置默认值等
  • 具体下面代码展示
<body>
    <div id="app">
      <cpn :cmessage="message" :cmovies="movies"></cpn>
    </div>
    <template id="cpn">
      <div>
        <ul>
          <li v-for="item in cmovies">{{item}}</li>
        </ul>
        <h2>{{cmessage}}</h2>
      </div>
    </template>
    <script src="../vue.js"></script>
    <script>
      // 父传子:props
      const cpn = {
        template: "#cpn",
        props: {
          //1.类型限制
          // 2.提供一些默认值,以及必传值

          cmovies: {
            type: Array,
            default() {
              return [];
            },
          },
          cmessage: {
            type: String,
            default: "aaaaaa",
            required: true,
          },
        },
      };
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊",
          movies: ["你好", "海贼王", "悲伤逆流成河"],
        },
        components: {
          cpn,
        },
      });
    </script>
  </body>

props数据验证

在前面,我们的props选项是使用一个数组。
我们说过,除了数组之外,我们也可以使用对象,当需要对props进行类型等验证时,就需要对象写法了。
验证都支持哪些数据类型呢?
String
Number
Boolean
Array
Object
Date
Function
Symbol
当我们有自定义构造函数时,验证也支持自定义的类型

子组件向父组件传递($emit)

props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中。
我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成。
什么时候需要自定义事件呢?

  • 当子组件需要向父组件传递数据时,就要用到自定义事件了。
  • 我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。
    自定义事件的流程:
    • 在子组件中,通过$emit()来触发事件。
    • 在父组件中,通过v-on来监听子组件事件。
    • 我们来看一个简单的例子:
    • 两个按钮+1和-1,点击后修改counter。
    • 我们整个操作的过程还是在子组件中完成,但是之后的展示交给父组件。
      这样,我们就需要将子组件中的counter,传给父组件的某个属性,比如total。
<body>
    <div id="app">
      <cpn @item-click="cpnClick"></cpn>
    </div>
    <template id="cpn">
      <div>
        <button v-for="item in categories" @click="btnClick(item)">
          {{item.name}}
        </button>
      </div>
    </template>
    <script src="../vue.js"></script>
    <script>
      const cpn = {
        template: "#cpn",
        data() {
          return {
            categories: [
              { id: "aaa", name: "热门推荐" },
              { id: "bbb", name: "手机数码" },
              { id: "ccc", name: "家用家电" },
              { id: "ddd", name: "电脑办公" },
            ],
          };
        },
        methods: {
          btnClick(item) {
            //   发射事件:自定义事件
            this.$emit("item-click", item);
          },
        },
      };
      //   2.父组件
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊",
        },
        components: {
          cpn,
        },
        methods: {
          cpnClick(item) {
            console.log("cpnClick", item);
          },
        },
      });
    </script>
  </body>
父子组件的访问方式

有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件。

  • 父组件访问子组件:使用$children或$refs

    $children的缺陷:

    • 通过$children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。
      但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。
      有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用$refs

      $refs的使用:
      $refs和ref指令通常是一起使用的。

    • 首先,我们通过ref给某一个子组件绑定一个特定的ID。

    • 其次,通过this.$refs.ID就可以访问到该组件了。

     <body>
        <div id="app">
          <cpn ref="aaa"></cpn>
          <cpn></cpn>
          <cpn></cpn>
          <button @click="btnClick">按钮</button>
        </div>
        <template id="cpn">
          <div>我是子组件</div>
        </template>
        <script src="../vue.js"></script>
        <script>
          const app = new Vue({
            el: "#app",
            data: {
              message: "你好啊",
            },
            methods: {
              btnClick() {
                // console.log(this.$children);
                // for (let c of this.$children) {
                //   console.log(c.name);
                //   c.showMessage();
                // }
                // console.log(this.$children[0].showMessage);
                console.log(this.$refs);
                console.log(this.$refs.aaa.name);
              },
            },
            components: {
              cpn: {
                template: "#cpn",
                data() {
                  return {
                    name: "我是子组件的name",
                  };
                },
                methods: {
                  showMessage() {
                    console.log("showMessage");
                  },
                },
              },
            },
          });
        </script>
      </body>
    
  • 子组件访问父组件:使用$parent

    • 尽管在Vue开发中,我们允许通过$parent来访问父组件,但是在真实开发中尽量不要这样做。

    • 子组件应该尽量避免直接访问父组件的数据,因为这样耦合度太高了。

    • 如果我们将子组件放在另外一个组件之内,很可能该父组件没有对应的属性,往往会引起问题。

    • 另外,更不好做的是通过$parent直接修改父组件的状态,那么父组件中的状态将变得飘忽不定,很不利于我的调试和维护。

上一篇:C++/STL/VC资源链接(查找方便)


下一篇:nmon使用