Vue中props的使用详解

编程学习 2021-07-04 16:45www.dzhlxh.cn编程入门
props属性是父子组件之间的通信桥梁。这篇文章主要介绍了Vue中props的使用,需要的朋友可以参考下

props属性是父子组件之间的通信桥梁。何为父子组件?从子组件的观点来看,他的上一级实例或组件即为他的父组件。我们知道,处于安全考虑,组件模板里我们无法直接使用父组件的data数据,使用props这个属性可以将父组件的数据传给子组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>props的测试</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
  <Child message="父组件的message,我把他的内容重新定义了,但是父组件不会发生改变哦,因为没有绑定,哈哈!!"></Child>
  <hr />
  <input v-model="message"/>
  <Child :message='message'></Child>
</div>
<script>
  Vue.component('Child',{
    props: ['message'],
    template: '<span>{{ message }}</span>'
  });
  var vm = new Vue({
    el: '#props',
    data: {
      message: 'prop的测试'
    }
  });
</script>
</body>
</html>

代码效果图

在子组件中对父组件的数据进行处理。父组件的数据通过props传入子组件以后,在子组件中也可对数据进行相关处理,包括计算属性、data属性等。这样当子组件需要对数据进行处理时,避免了直接在父组件中对数据进行操作,而且由于props数据流单向性,在子组件中更改数据时,不会对父组件的数据产生影响。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>props的测试</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
  <input v-model="message"/>
  <Child :message='message'></Child>
</div>
<script>
  Vue.component('Child',{
    props: ['message','todos'],
    template: '<span>{{ test }}</span>',
    computed: {
      test: function(){
        return this.message.trim().toUpperCase();
      }}
  });
  var vm = new Vue({
    el: '#props',
    data: {
      message: 'prop的测试'
    }
  });
</script>
</body>
</html>

代码效果图

代码效果图

prop的验证

 我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发出警告。这对于开发给他人使用的组件非常有用。

要指定验证规则,需要用对象的形式来定义 prop,而不能用字符串数组

Vue.component('example',{
  props: {
    propA: String,
    propB: [Number,String]
}
});

总结

以上所述是长沙网络推广给大家介绍的Vue中props的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板