父向子通信（propos基本用法/驼峰命名问题）

最新推荐文章于 2022-07-12 23:06:32 发布

407指导员

最新推荐文章于 2022-07-12 23:06:32 发布

阅读量496

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/111596892

版权

vue 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

父向子通信（propos基本用法）

方式一（字符串数组）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父传子</title>
</head>
<body>
<div id="app">
  <cpn :cpeople="people" :cmessage="message"></cpn>
</div>
<!--定义模板-->
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cpeople">{{item}}</li>
    </ul>
    <p>{{cmessage}}</p>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      people: ['lcq', 'lqj', 'lhb', 'tty']
    },
    components: {
      cpn: {
            template: '#cpn',
            props: ['cpeople', 'cmessage'],
      }
    }
  });
</script>

</body>
</html>

在这里插入图片描述

vue实例就是根组件，也是一个父组件。（树的根）

注意：propos数组中保存的是变量，而不是一个字符串，很容易误会，然后动态绑定这个些变量和父组件里的data数据。一定要动态绑定v-bind:

一旦绑定后propos数组里的变量便可以正常使用，和之前一样使用v-for动态创建li

方式二（对象写法）

propos类型验证都支持的数据类型

String

Number

Boolean

Array

Object

Date

Function

Symbol

自定义类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对象写法</title>
</head>
<body>
<div id="app">
  <cpn :cpeople="people" :cmessage="message"></cpn>
</div>
<!--定义模板-->
<template id="cpn">  
  <div>
    <ul>
      <li v-for="item in cpeople">{{item}}</li>
    </ul>
    <p>{{cmessage}}</p>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      people: ['lcq', 'lqj', 'lhb', 'tty']
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          /*可以提供类型的限制*/
          cpeople: Array,
          /*可以提供一些默认值，可以创建一个对象*/
          cmessage: {
            type: String,
            /*默认没有传值时显示*/
            default: '默认没有传值显示',
            /*如果为true,必须给该对象传值*/
            required: true,
          },
        }
      }
    }
  });
</script>

</body>
</html>

再vue.js版本2.5.1以下时，如果propos里的类型是对象或数组，default必须写成函数形式。

在这里插入图片描述

驼峰标识问题

如果再propos中的对象或数组使用驼峰命名，

props: {
  cInfo: {
    type: Object,
    default() {
      return {};
    },
  }
}

那么数据动态绑定时不能直接使用驼峰命名绑定，所有用到驼峰大写的地方用-代替大写，写成小写即可。

<cpn :c-info="info"></cpn>

只有动态绑定部分的驼峰需要替换成这样，其他地方驼峰正常使用。不采用驼峰命名也可以解决。

<body>
<div id="app">
  <cpn :c-info="info"></cpn>
</div>
<template id="cpn">
  <h2>{{cInfo}}</h2>
</template>
<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    props: {
      cInfo: {
        type: Object,
        default() {
          return {};
        },
      }
    }
  }
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'lcq',
        age: 18,
        height: 1.88
      }
    },
    components: {
      cpn
    }
  });
</script>
</body>

模板里的元素，用div包起来。不会报错

407指导员

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
父向子通信（propos基本用法/驼峰命名问题）

父向子通信（propos基本用法）方式一（字符串数组）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父传子</title></head><body><div id="app"> <cpn :cpeople="people" :cmessage="message"></c
复制链接

扫一扫

专栏目录