随手记

在掘金上看到的文章，记到我这里吧，掘金上关于vue组建通讯的文档
https://juejin.im/post/5bd97e7c6fb9a022852a71cf
 data里面的数据：
data 选项里的数据是灵活的
可以定义任何数据类型
也可以改变成任何数据类型
当数据变化时，视图和行为绑定的数据都会同步改变
父组件向子组件中传递函数的例子：
父组件：
<template>
   <div>
      <demo :fn = 'myFunction'  ></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     components : {
       Demo
     },
     methods: {
       myFunction () {
           console.log('vue')
       }
     }
   }
</script>
子组件：

<template>
  <div>
     <button @click='fn'>按钮</button>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props: [ 'fn' ],
}
</script>
注解：props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数
父-子中传递参数太多的话，直接传递一个对象
父组件：
<template>
   <div>
      <demo v-bind= 'msg'  ></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     components : {
       Demo
     },
     data () {
       return {
         msg : {a:1,b:2}
       }
     }
   }
</script>
子组件：
<template>
  <div>
     <button>按钮</button>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props: ['a','b'],
  created () {
     console.log(this.a)
     console.log(this.b)
  },
}
</script>
注解：在 data 选项中，当前实例（当前组件中改动）可以任意改变data选项里的数据，Vue传递数据时是基于数据单向流动，子组件不能改变
当前实例中的 props 任何属性，需要通知父组件改变相应的值，重新改变，单向数据流的原因也是如此，就像河流一样，水只会从高向低流，
想让水的质量改变，只有从源头改变
子组件中传递的数据过度到data中来改变
props: ['msg'],
data: function () {
  return { myMsg: this.msg }
}
通过compute形式进行将传递过来的数据发生改变
props:['msg']
computed : {
   computedMsg () {
       return this.msg + 1
   }
}
问题：怎样把父组件传递过到自组件的值变为this.xx的值
父组件：
<headerName :user-name="userName" :parent-company="parentCompany" :token-id="tokenId"></headerName>
子组件：
props:['userName','parentCompany','tokenId']
 methods : {
    goUserInfo(){ 
      //修改用户信息  
    var tokenIdParams = this.tokenId ;
    // console.log(tokenIdParams)
    if(tokenIdParams){   //tyrz.gdbs.gov.cn
       window.location.href = 'http://tyrz.gdbs.gov.cn/am/common/foward.do?tokenid='+tokenIdParams+'&menu=1001';
      }
    }
  }
 自定义组件的 v-model的事件解析：
v-model 真正的写法形式是下面的形式：
<custom-input
  v-bind:value="something"
  v-on:input="something = arguments[0]">
</custom-input>
自定义组件一定会遇见双向绑定的时候，座椅才会出现这个问题：你自己的model与原始的model会发生冲突
定制 v-model， 通过 model 选项改变 props 和 event 的值，从而解除两者的冲突。

后记：

在月亮与六便士中看到的文字，在水里，就不得不在水里挣扎，如果不挣扎的话就会被淹死了。我觉得就好比我们现在的生活一样。

作者在书中写的一个年轻有为的医生，事业上术业有专攻，令人称赞，又娶了一个年轻漂亮的妻子。让人人羡慕。那么什么样的生活才是美好的？是不是像这位年轻医生的一样呢？这取决与你怎样看待生活的意义。我到现在信奉的依然是幸福是要靠自己努力争取的，天下没有免费的午餐，若果有的话，那也是等价交换而已