props:{}跟data(){}的区别

props:{}跟data(){}的区别

data跟props是区别的什么 感觉都可以定义变量

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

两者区别如下:

(1)子组件中的data数据,不是通过父组件传递的是子组件私有的,是可读可写的

(2)子组件中的所有 props中的数据,都是通过父组件传递给子组件的,是只读的

举个例子:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  </head>
<body>
  <div id='app'>
    <!-- 父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,
    以属性绑定的形式,传递到子组件内部,供子组件使用 -->
    <com1 :parentmsg="msg"></com1>
  </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      msg:'123-我是父组件中的数据'
    },
    components:{
      //子组件中无法访问父组件的data和methods
      com1:{
        //子组件中的data数据,不是通过父组件传递的是子组件私有的
        //data上的数据,是可读可写的
        data(){
          return {
            title:'123',
            content:'qqq'
          }
        },
        template:"<h1>这是子组件--{{parentmsg}}</h1>",
        //注意,组件中的所有 props中的数据,都是通过父组件传递给子组件的
        //只读
        props:['parentmsg'],//把父组件传递过来的parentmsg属性,
        //先在props数组中定义一下,这样,才能使用这个数据
        methods:{
       
        }
      }
    }
  })
</script>
</html>

希望可以帮到你!

  • JJJustin 提问者 #1
    上面代码有些地方没看懂 1template属性是什么 有什么作用 2parentmsg是父组件传给子组件的属性? 它的值等于msg?
    2019-09-06 15:01:58
  • 卡布琦诺 回复 提问者 JJJustin #2
    1、template创建vue模板的,开发中不常用,这里只是方便举例子才使用这种方法,让同学更加直观的理解props和data;2、可以这么理解:parentmsg是父组件传给子组件的属性,它的值等于msg
    2019-09-06 15:10:08
  • JJJustin 提问者 回复 卡布琦诺 #3
    我总结一下 data是可读可写的 但是子组件是访问不到父组件的data 但是父组件可以通过props 传递一个属性过去 然后属性是只读的
    2019-09-06 15:20:04
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师