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的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Vue中props的使用详解

请登录后发表评论