【Vue 从入门到实战进阶式掌握完整知识体系】011

2025-07-28 05:52:34

【Vue 从入门到实战进阶式掌握完整知识体系】011 2、组件间传值及传值校验父组件给子组件传值代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ht

【Vue 从入门到实战进阶式掌握完整知识体系】011

2、组件间传值及传值校验

父组件给子组件传值

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    template: `
        <div>
          <test message="Hello World!" />
        </div>
    `
  });

  appponent('test',{
    props: ['message'],
    template: `
        <div>{{message}}</div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061110012006.png

父组件给子组件传动态参数

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data(){
      return{
        num: 12
      }
    },
    template: `
        <div>
          <test message="12" />
          <test :message="num" />
        </div>
    `
  });

  appponent('test',{
    props: ['message'],
    template: `
        <div>{{ typeof message }}</div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061110404258.png

子组件校验父组件的传参

String、Array、Boolean、Object、Function、Symbol

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data(){
      return{
        num: 12
      }
    },
    template: `
        <div>
          <test message="12" />
          <test :message="num" />
        </div>
    `
  });
  // String、Array、Boolean、Object、Function、Symbol
  appponent('test',{
    props: {
      message: String
    },
    template: `
        <div>{{ typeof message }}</div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106111062069.png

父组件给子组件传函数

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    methods:{
      add(){
        cole.log("函数执行成功！")
      }
    },
    template: `
        <div>
          <test :message="add" />
        </div>
    `
  });

  // 这里写成校验的写法
  appponent('test',{
    props: {
      message: Function
    },
    template: `
        <div>
          {{ typeof message }}
          <button @click="message">点我</button>
        </div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061111125225.png

设置必须传参数

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    template: `
        <div>
          <test message="hello" />
          <!--不传参-->
          <test />
        </div>
    `
  });

  // 这里写成校验的写法
  appponent('test',{
    props: {
      message: {
        type: String, // 要求传字符串（类型）
        required: true // 要求必须传（是否必须）
      }
    },
    template: `
        <div>
          {{ typeof message }}
          {{ message }}
        </div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061126242.png

为参数设置默认值

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    template: `
        <div>
          <test message="hello" />
          <!--不传参-->
          <test />
        </div>
    `
  });

  // 这里写成校验的写法
  appponent('test',{
    props: {
      message: {
        type: String, // 要求传字符串
        required: true, // 要求必须传
        default: '大哥刘备' // 默认值，也可以是一个函数
      }
    },
    template: `
        <div>
          {{ typeof message }}
          {{ message }}
        </div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106112909522.png

要求值小于1000

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data(){
      return{
        number: 2000
      }
    },
    template: `
        <div>
          <test :message="number" />
        </div>
    `
  });

  // 这里写成校验的写法
  appponent('test',{
    props: {
      message: {
        type: umber, // 要求传数字
        required: true, // 要求必须传
        default: 100, // 默认值
        validator: function(value){
          return value < 1000;
        } // 限定值
      }
    },
    template: `
        <div>
          {{ typeof message }}
          {{ message }}
        </div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106112455210.png本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2021-06-22，如有侵权请联系 cloudcommunity@tencent 删除messagescriptvue函数入门

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200228.html

本站网友 kangwei	12分钟前发表
{ props
本站网友野田佳彦访华	12分钟前发表
Symbol appponent('test'
本站网友挑挑拣拣	19分钟前发表
` <div> {{ typeof message }} <button @click="message">点我</button> </div> ` }) ct vm = ('#root'); </script> </html>运行结果image-2021061111125225.png设置必须传参数代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友郑州团购房	8分钟前发表
` <div>{{ typeof message }}</div> ` }) ct vm = ('#root'); </script> </html>运行结果image-2021061110404258.png子组件校验父组件的传参 String
本站网友防辐射的植物	19分钟前发表
{ props
本站网友 345	10分钟前发表
原始发表：2021-06-22

【Vue 从入门到实战进阶式掌握完整知识体系】011