vue中的prop

作者: 回不去的那些时光 | 来源:发表于2018-12-05 22:56 被阅读18次

对vue的props实现双向数据流
vue中的prop
Vue Prop属性功能与用法实例
elementUI 参数传递类型错误 2020-04-30
Vue中的prop属性
vue组件通信（父子）
vue中爆错Error in render: "TypeErro
深入浅析Vue中的Prop
vue~ prop
vue prop

学习vue有一段时间了，也写了一些东西。今天看文档突然看到了一个好玩的东西，那就是prop。prop的作用是父组件中引用了子组件并给子组件加了一个属性，这个属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象。接下来就展示改怎么用。

传静态的属性

子组件：

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: ["msg"]
}
</script>

父组件：

<template>
  <div id="app">
    <HelloWorld msg="hello"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  }
};
</script>

好了，这样就完成了一个最简单的使用prop接收父元素的值

传动态字符串

子组件

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: ["msg"]
}
</script>

父组件

<template>
  <div id="app">
    <HelloWorld :msg="hello"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      hello: "hello world"
    }
  }
};
</script>

可以看到，子组件我未做任何修改，只是在父组件做了一些修改

传动态数组

子组件

<template>
  <div>
    <ul>
      <li v-for="item in msg" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["msg"]
}
</script>

父组件

<template>
  <div id="app">
    <HelloWorld :msg="hello"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      hello: ["aa", "bb", "cc"]
    }
  }
};
</script>

传动态对象

子组件

<template>
  <div>
    <h1>{{ msg.id }}</h1>
    <h2>{{ msg.name }}</h2>
  </div>
</template>

<script>
export default {
  props: ["msg"]
}
</script>

父组件

<template>
  <div id="app">
    <HelloWorld :msg="hello"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      hello: {
        id: 1,
        name: "hello dj"
      }
    }
  }
};
</script>

对prop的状态进行验证

prop的状态可以为

String
Number
Boolean
Array
Object
Date
Function
Symbol
下面进行演示
子组件

<template>
  <div>
    <h1>{{ num }}</h1>
    <h1>{{ msg }}</h1>
    <h1>{{ obj.id }}</h1>
    <h2>{{ obj.name }}</h2>
    <ul>
      <li v-for="item in arrs" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    num: {
      type: Number
    },
    msg: {
      type: String
    },
    arrs: {
      type: Array
    },
    obj: {
      type: Object
    }
  }
}
</script>

父组件

<template>
  <div id="app">
    <HelloWorld :num="num" :msg="hello" :arrs="arr" :obj="post"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      num: 10,
      hello: "hello world",
      arr: ["aa","bb","cc"],
      post: {
        id: 1,
        name: "hello dj"
      }
    }
  }
};
</script>

上面演示了Number,String,Array,object的用法