VUE之组件（复用性、props、单向数据流）

组件组织

通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE：组件化、数据驱动

组件复用性

可以将组件进行任意次数的复用，例如，利用组件定义一个超级链接，在项目中多次使用

<!-- 引用组件 --><my-aaa></my-aaa><my-aaa></my-aaa><my-aaa></my-aaa>
//注册组件Vue.component('my-aaa',{template:`<a href="#">百度</a>`})//页面出现三个百度由此看来组件的复用性

识别组件

组件分为父组件与子组件怎么识别呢？
①在js中创建注册组件的代码被称为“子组件”（组件模板→子组件）
②在HTML文档中引用组件的代码被称为“父组件”（组件引用→父组件）

<!-- 父组件 --><my-aaa></my-aaa><my-aaa></my-aaa><my-aaa></my-aaa>// 子组件template:`<a href="#">百度</a>`

小结：注册处为子组件、引用处为父组件。

props传值

子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据，props 的值可以是两种，字符串数组或者对象。

接下来主要介绍下字符串数组的用法。

<my-aaa dsa="做个俗人"></my-aaa>
//用props传值得方法Vue.component('my-aaa',{props:['dsa'],// 子组件template:`<div>友情链接:<a href="#">百度</a>,(<b>{{dsa}}</b>)</div>`})

props-动态传值

动态传值：日常开发里，传递的数据并不是直接写死的，而是来自父级的动态数据，使用指令 v-bind来动态绑定 props 值，当父组件的数据变化时，也会传递给子组件
代码如下

//html代码
<my-aaa :dsa="dsaValue"></my-aaa>
//js代码Vue.component('my-aaa',{props:['dsa'],// 子组件template:`<div>友情链接:<a href="#">百度</a>,(<b>{{dsa}}</b>)          </div>`})var demo=new Vue({el:"#demo",data:{dsaValue:'一辈子做个俗人也挺好的'}            })

如何给文章做一个标题代码如下

<my-aaa :dsa="dsaValue"></my-aaa>
//jsVue.component('my-aaa',{props:['dsa'],// 子组件template:`<div><h3>{{dsa}}</h3>           </div>`})var demo=new Vue({el:"#demo",data:{dsaValue:'新书上架'}           })

注意事项：
1、子组件通过props接收父级组件传递的数据
2、由于HTML特性不区分大小写，当使用 DOM 模板时，驼峰命名的 props 名称要转为短横分隔命名。
（即HTML中引用是短横分隔命名blog-title，JS的DOM模板里为小驼峰命名blogTitle，两者可以对应识别）

props传值-多个值，
接下来从父级组件给传入文章标题、作者等信息
代码如下：

<div id="demo"><my-aaa:biaoti="biaotiValue":neirong="neirongValue":zuozhe="zuozheValue"></my-aaa></div></body><script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">Vue.component('my-aaa',{props:['biaoti','zuozhe'],template:`<div><h3>{{biaoti}}</h3><p>{{neirong}}</p><i>{{zuozhe}}</i>  </div>`,data:function(){return{neirong:`返点卡拉夫加拿大萨减肥的萨科技刀剑三京东方康`} }})       var demo=new Vue({el:"#demo",data:{biaotiValue:'红楼梦',zuozheValue:'曹雪晴'}})

改变 props

业务中会经常遇到两种需要改变 props 情况
（1）父组件传值→子组件保存初始值（初始化后解耦）
第一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 再声明一个数据，引用父组件的 props ，示例代码如下：
案例解析：
组件中声明了数据 childValue它在组件初始化时会获取来自父组件的 countValue之后就与之无关了，只用维护 childValue，这样就可以避免直接操作父级组件count数据。
（2）被转变的原始值
另一种情况就是 props作为需要被转变的原始值传入。这种情况用计算属性就可以了。示例代码如下

总结

（1）组件组织：通常一个应用会以一棵嵌套的组件树的形式来组织，VUE两大核心思想–组件化、数据驱动。
（2）组件复用性：可以将组件进行任意次数的复用
（3）单个根元素限制：every component must have a single root element (每个组件必须只有一个根元素)
（4）识别父组件与子组件：注册处为子组件、引用处为父组件
（5）props传值：通过 Prop 向子组件传递数据，即子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据