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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM