vue---component2---组件传参1 之父传子props（父组件向子组件传、子组件向父组件传、非相关组件之间传参）

最新推荐文章于 2023-06-04 21:48:53 发布

咩有猫腻.

最新推荐文章于 2023-06-04 21:48:53 发布

阅读量457

点赞数

分类专栏：三-框架类 Vue

本文链接：https://blog.csdn.net/DcTbnk/article/details/107236532

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

vue的传参方式和router的使用技巧 – 详情链接

组件传参

父组件向子组件传，通过props属性实现
子组件向父组件传，通过事件派发
非相关组件之间传参，使用事件总线

一、父组件向子组件传参使用props属性进行传递

div#app是父组件，组件模板是子组件，通过<对应的组件模板名字变量></对应的组件模板名字>来链接,俺是这样理解的，不知道对不对
demo1:props是数组的时候，不能解决内部元素身为对象所产生的问题，既报错又导致相应内容不出来
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件传参</title>
    <style>
      .counter {
        border-bottom: solid orangered 0.02rem;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 因为step的值是一个数字 而title的值是一个字符串类型 
      v-bind 是vue中的一个指令(命令，标签属性)，动态的绑定一个数据,可以简写为:，
      -->
      <counter :step="2" title="计数器1"></counter>
      <counter :step="5" title="计数器2"></counter>
      <counter
        :step="7"
        title="计数器3"
        :list="['小明', '小花', '小智', '小力', '阿奇']"
        :dog="{id: 1, name: '天天', skills: '开直升飞机'}"
      ></counter>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
      // 父组件向子组件传参使用props属性进行传递
      var counter = {
        template: `<div class="counter">
          <h5>当前的步长为:{{step}}</h5>
          <p>{{title}}</p>
          <button @click="count+=step">当前的计数值为:{{count}}</button>
          <p v-for="(item, index) in list" :key="index">{{item}}</p>
        </div>`,
        data() {
          return {
            count: 1,
          };
        },
        props: ["step", "title", "list"], // 属性以数组的形式获取
        // list是数组的话，可以写在template中，即使counter在#app容器内没有写相关属性值都是没问题的
        // 但如果是对象的话，如果template中有使用到这个对象的相关内容，每个counter都必须写相关属性，否则会报错，还会导致部分内容不出现
      };
      new Vue({
        el: "#app",
        components: {
          counter,
        },
      });
    </script>
  </body>
</html>

demo2：props是对象的时候，给内部对象设置默认值，即可解决内部元素身为对象所产生的问题，不过还是会报错的，只不过是不影响结果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件传参-父传子</title>
    <style>
      .dog {
        border-bottom: solid 0.02rem deeppink;
        padding: 0.2rem;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <dog></dog
      ><!-- m是对象，如果m不传参 就会报错 ，但是不影响结果 -->
      <dog :m="{name:'天天', skills:'驾驶飞机'}"></dog>
      <dog :m="{name:'小力', skills:'开铲车'}"></dog>
      <dog :m="{name:'赤丸', skills:'...'}"></dog>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
      /* 组件套组件 用components */
      const fav = {
        template: `<h1>特殊技能</h1>`,
      };
      const dog = {
        components: {
          fav,
        },
        template: `<div class="dog">
          <h5>{{m.name}}</h5>
          <p>{{m.skills}}</p>
          <h3>{{pet}}</h3>
          <fav></fav>
        </div>`,
        /* 放在这个位置也可以
        components: {
          fav,
        }, */
        props: {
          /* m是个对象 ，此时不传参 ，会报错，但是会使用default的默认值，不影响结果，但是前面一个demo的哪个对象没有默认值才会既报错又影响结果 */
          m: {
            type: Object,
            default: {
              name: "赤丸",
              skills: "。。。",
            },
          },
          /* pet是个字符串 ，不是对象，所以不传参不会报错也不会对结果有什么影响 */
          pet: {
            type: String,
            // default: "小狗",
            // required: true, // 设置属性必填
          },
        },
      };

      new Vue({
        el: "#app",
        components: {
          dog,
        },
      });
    </script>
  </body>
</html>

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue---component2---组件传参1 之父传子props（父组件向子组件传、子组件向父组件传、非相关组件之间传参）

组件传参父组件向子组件传，通过props属性实现子组件向父组件传，通过事件派发非相关组件之间传参，使用事件总线一、父组件向子组件传参使用props属性进行传递demo1:props是数组的时候，不能解决内部元素身为对象所产生的问题，既报错又导致相应内容不出来<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
复制链接

扫一扫