day04-vuejs-父&子组件之间的传值问题

父组件向子组件传值以及data和 props的区别：

image.png

结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法

父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

image.png

注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
props 中的数据，都是只读的，无法重新赋值
props: ['parentmsg']
把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据

image.png

注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；

区别：

data 上的数据，都是可读可写的；
把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据

---

子组件向父组件传值:

1. 原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
2. 父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

3.子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

---

组件案例-评论列表:

分析：发表评论的业务逻辑
1. 评论数据存到哪里去？？？ 存放到了 localStorage 中 localStorage.setItem('cmts', '')
2. 先组织出一个最新的评论数据对象
3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：
3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify
3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个 数组对象， 然后，把最新的评论， push 到这个数组
3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则 可以 返回一个 '[]' 让 JSON.parse 去转换
3.4 把 最新的 评论列表数组，再次调用 JSON.stringify 转为 数组字符串，然后调用 localStorage.setItem()

 



    


    

      

        评论人： {{ item.user }}
        {{ item.content }}
      
    


  


  

  

this.$refs` 来获取DOM元素和组件：

 

    
 
    
哈哈哈， 今天天气太好了！！！

    


    
  

  

image.png