zoukankan      html  css  js  c++  java
  • 组件传值-父组件向子组件传值和 data 与 props 的区别

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
    <script src="js/vue-2.4.0.js"></script>
    </head>
    <body>
    <div id="app">
    <!-- 父组件,可以在引用子组件的时候,通过 属性绑定(v-bind:)的形式,把需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用-->
    <com1 v-bind:parentmsg="msg"></com1>
    </div>
    <script>
    //创建 Vue 实例,得到 viewmodel
    var vue=new Vue({
    el:'#app',
    data:{
    msg:'这是父组件中的数据'
    },
    methods:{},
    components:{
    //结论:经过演示,发现子组件中,默认无法访问到父组件中的data上的数据和 methods 中的方法
    com1:{
    data:{
    //注意:子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件自身私有的,比如:子组件通过Ajax,请求回来的数据,都可以放到 data 身上;
    //data 上的数据,都是可读可写的;
    return{
    title:'123',
    content:'qqq'
    }
    },
    template:'<h1 @click="change">这是子组件---{{ parentmsg }}</h1>',
    //注意:组件中的所有 props 中的数据,都是通过父组件传递给子组件的
    // props 中的数据,都是只读的,无法中心赋值
    props:['parentmsg'],//把父组件传递过来的 parentmsg 属性,先在props 数组中,定义一下,这样才能使用这个数据
    directives:{},
    filters:{},
    components:{},
    methods:{
    change(){
    this.parentmsg='被修改了'
    }
    }
    }
    }
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    springcloud12-spring cloud stream
    Linux上安装gitbook并拉取git项目编译
    Python 之一条命令生成项目依赖包文件 requirements.txt
    python跨模块使用全局变量的实现方法
    微信朋友圈测试用例
    linux安装maven
    jenkins上集成sonar
    windows上安装sonar并使用其分析项目
    jquery 点击同级元素隐藏,再点击显示
    10进制转16进制自动补全8位 并高低位转换
  • 原文地址:https://www.cnblogs.com/lujieting/p/10459201.html
Copyright © 2011-2022 走看看