vue组件Prop传递数据的实现示例_网络技术_宿州市腾雀网络科技有限公司

vue组件Prop传递数据的实现示例

发布时间 - 2026-01-11 02:50:06 点击率：次

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。

每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。

1、Prop静态传递数据

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="vue.js"></script>

</head>
<body >
<div id="app">
  <!--静态传递数据-->
   <my-component message="hello" name="刘二狗" age="18"></my-component>
</div>
</body>

<script>
  Vue.component('my-component',{
    //子组件使用父组件的数据 message name age
    props:['message','name','age'],
    //用data选项对数据进行处理
    data:function(){
     return{
       message1: this.message +'用data选项对数据进行处理'
     }
    },
    //用计算属性选项对数据进行处理
    computed:{
      message2:function(){
        return this.message + '用计算属性选项对数据进行处理'
      }
    },
    template:'<div>' +
          '<span>{{message1}}</span><br>'+
          '<span>{{message2}}</span><br>'+
          '<span>{{message}} {{name}}今年{{age}}了</span><br>'+
         '</div>'
  })
  new Vue({
    el:'#app'
  })
</script>
</html>

输出结果：

2、Prop动态传递数据

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
    <input v-model="parentMsg"><br>
    <my-component :message="parentMsg"></my-component>
</div>
</body>

  <script>
    Vue.component('my-component',{
      props:['message'],
      data:function(){
        return{count:this.message+'刘三狗的嫉妒了'}
      },
      computed:{
        normalizedSize: function () {
          return this.message.trim().toLowerCase()
        }
      },
      template:'<div>' +
            '<span>{{message}}---{{normalizedSize}}</span><br>'+
            '<span>{{count}}</span>'+
           '</div>'
    })

    new Vue({
      el:'#app',
      data:{
        parentMsg:'哈哈哈'
      }
    })
</script>
</html>

输出结果：

3、Prop验证，我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。在前台的控制器中可以看到警告信息。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body>
  <div id="app">
    <example :prop-d="message"></example>
  </div>
</body>

<script>
  Vue.component('example', {
    props: {
      // 基础类型检测 （`null` 意思是任何类型都可以）
      propA: Number,
      // 多种类型
      propB: [String, Number],
      // 必传且是字符串
      propC: {
        type: String,
        required: true
      },
      // 数字，有默认值
      propD: {
        type: Number,
        default: 100
      },
      // 数组／对象的默认值应当由一个工厂函数返回
      propE: {
        type: Object,
        default: function () {
          return { message: 'hello' }
        }
      },
      // 自定义验证函数
      propF: {
        validator: function (value) {
          return value > 10
        }
      }
    },
    template:'<span>{{propD}}</span>'
  })

  new Vue({
    el:'#app',
    data:{
      message:'propD验证只能传入数字类型'
    }
  })
</script>
</html>

控制台输出的警告信息：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue # Prop传递数据 # 组件传递数据 # vue.js组件传递数据 # vue父组件向子组件(props)传递数据的方法 # vuejs动态组件给子组件传递数据的方法详解 # vue.js组件之间传递数据的方法 # vue组件中使用props传递数据的实例详解 # vue中各组件之间传递数据的方法示例 # Vue2.x中的父组件传递数据至子组件的方法 # vue2.0 父组件给子组件传递数据的方法 # vue子组件使用自定义事件向父组件传递数据 # vue项目中做编辑功能传递数据时遇到问题的解决方法 # Vue.js组件使用props传递数据的方法 # 默认值 # 这是 # 也不 # 这意味着 # 你不 # 我们可以 # 可以看到 # 自定义 # 要让 # 不符合 # 绑定 # 为了防止 # 大家多多 # 器中 # title # UTF # script # type # lang # head

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：千库网网页端入口千库网设计素材官网入口

下一篇：手把手教你在CentOS上搭建web服务器的详细步骤

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：千库网网页端入口千库网设计素材官网入口

下一篇：手把手教你在CentOS上搭建web服务器的详细步骤