欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-26 09:39:42
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。 prop 是单向...

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的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>

输出结果:

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

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>


输出结果:

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

 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传递数据的实现示例

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