vue组件—父组件向子组件传值（通过属性绑定）

最新推荐文章于 2025-11-05 22:16:25 发布

原创最新推荐文章于 2025-11-05 22:16:25 发布 · 1.7w 阅读

3 ·

CC 4.0 BY-SA版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章

订阅专栏

Vue

31 篇文章

订阅专栏

本文探讨了Vue中父组件如何通过属性绑定向子组件传递数据，强调了数据绑定的注意事项，如命名规范和props的使用。同时指出子组件只能读取父组件的属性且其属性为私有。还提到了传递方法时应使用v-on绑定，并通过this.$emit()触发。文中通过HTML代码示例展示了仅传递值和仅绑定事件的情况。

浏览器调试工具显示的正确的，调用父类方法功能能实现，但是出现了两次定义标签内容，两个按钮其中一个不能正常响应：是因为将传值跟绑定事件的两个作用分开了，方便观察

注意：

1.v-bind数据绑定时，可能由于某种命名的规范方法或者属性名字不能是带有驼峰或者连字符的。并且绑定之后，还要放到子组件的props数据后，方可调用。

2.子组件调用的父组件的属性，只能读不能写。同时，子组件的属性是其私有的，Ajax请求返回data属性变化也只是子组件私有的

3.如果要传递方法时，用v-on绑定方法，通过this.$emit()完成template对于data的作用

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
      <div id="app">
          <com1 v-bind:extendmsg="msg"></com1>
          <!--父组件在调用子组件时候，可以通过数据绑定的形式，传值为子组件-->
          <!--注意：绑定的方法或者属性名字不能是带有驼峰或者连字符的，可能是命令规范-->
          <com1 @showcool="show"></com1>
      </div>
      
      <template id="app2">
          <div>
              <h3>vm实例的子组件  +++ {{ extendmsg }}</h3>
              <input type="button" value="点击" @click="myclick">
          </div>
      </template>

      <script>
          var vm = new Vue({
             el:'#app',
             data:{
                 msg:'com1的父组件data属性的数据'
             },
             methods:{
                 show(){
                     console.log('成功调用了父组件的方法')
                 }
             },
             components:{
                 com1:{
                     template:'#app2',
                     props:['extendmsg'],
                     //props:道具 只有绑定过后并在其中定义过，子组件才能使用父组件的某些属性   
                     //这里的数据，只可读不可写
                     methods: {
                         myclick(){
                             this.$emit('showcool')
                             //emit:触发，调用 通过这个完成template对于data的作用    
                         }
                     }
                 }
             }
          });
      </script>
</body>
</html>

只传值的效果：