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

父组件向子组件传值

  <!--父组件在调用子组件时候，可以通过数据绑定的形式，传值为子组件-->
  <!--注意：绑定的方法或者属性名字不能是带有驼峰或者连字符的，可能是命令规范-->
  //props:道具 只有绑定过后并在其中定义过，子组件才能使用父组件的某些属性
  //这里的数据，只可读不可写
  
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app"> 
    //父组件可以在引用子组件的时候，通过属性绑定 (v-bind)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
        <com1 v-bind:parentmsg="msg"></com1>
    </div>

 <script>
          var vm = new Vue({ //创建vue 实例，得到viewmodel
             el:'#app',
             data:{
                 msg:'123父组件data的数据'
             },
             methods:{},
             components:{ 
             //子组件中默认无法访问父组件中的 data 数据和 methods 中的方法
                 com1:{
                    data() { 
                    // 1、子组件 data 数据是自己私有的，不是父组件传递的，比如子组件通过ajax请求的数据都可以放在 data 中。2、props 中的数据只读无法赋值，data 中的数据可读可写
                        title: 123,
                        content: 'qqq'
                    }
                     template:'<h1 @click="change">这是子组件--{{parentmsg}}</h1>',   // 组件中的所有 props 中的数据，都是通过父组件传递给子组件的
                     props:['parentmsg'],  
                     //把父组件传递过来的 parentmsg 组件在prop数组中定义一下，这样才能使用这个数据
                     directives:{},
                     filters:{},
                     components:{},
                     methods:{
                        change() {
                            this.parentmsg = '被修改'
                        }
                    },
                 }
             }
          }); 
 </script>
</body>
</html>

参考链接：
https://blog.csdn.net/qq_42036616/article/details/82889716

 

posted on 2019-10-09 17:33  凌霄102  阅读(1624)  评论(0)  编辑  收藏  举报

导航