我们今天来聊一下关于vue组件的问题。
1.is的使用 假设有个这样的场景.我希望写一个table表格
常规的HTML结构 <div id="root"> <table> <tbody> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> </tbody> </table> </div>那么现在我们希望能通过,vue组件的方式,那么我们看下以下的代码
<div id="root"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> </div> Vue.component("row",{ template:"<tr><td>1</td></tr>" }) new Vue({ el:"#root" })打开浏览器你会发现好像和原来的表格没有多大的区别,但是我们打开控制台查看DOM元素就会发现,我们的tr在在table的外面,这是不符合我们W3C编码的标准的。那么怎么解决这个问题呢？
在vue中,它为这种情况提供了一个解决方法,我们来看下怎么解决这个问题。
<div id="root"> <table> <tbody> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> </tbody> </table> </div> <script> Vue.component("row",{ template:"<tr><td>1</td></tr>" }) new Vue({ el:"#root" }) </script>这个时候我们打开控制台,就会发现它的结构就已经符合我们W3C的编码标准了。其实呢,像这种符合标签还有很多例如,,这个标签下面是要添加option的，那么我们来看下以下代码,
<div id="root"> <select> <row></row> <row></row> <row></row> <row></row> </select> </div> <script> Vue.component("row",{ template:"<option>1</option>" }) new Vue({ el:"#root" }) </script>我们查看DOM的时候,一样会发现是没有option标签的,我们也只能使用vue中的is属性
<div id="root"> <select> <option is="row"></option> <option is="row"></option> <option is="row"></option> <option is="row"></option> </select> </div> <script> Vue.component("row",{ template:"<option>1</option>" }) new Vue({ el:"#root" }) </script>2.关于组件中的data
<div id="root"> <table> <tbody> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> </tbody> </table> </div> <script> Vue.component("row",{ data:{ message:"这是一个表格" }, template:"<tr>{{message}}</tr>" }) new Vue({ el:"#root" }) </script>这个时候,我们就会发现,页面无法出现数据,而且还报错了，这是什么原因呢？
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
也就是说,要是想在组件里面使用data选项,不能够直接写成对象形式,而是一个函数
<div id="root"> <table> <tbody> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> </tbody> </table> </div> <script> Vue.component("row",{ data:{ message:"这是一个表格" }, template:"<tr>{{message}}</tr>" }) new Vue({ el:"#root" }) </script>这样子写组件才能正确的显示数据.千万要注意这个问题。
3.关于组件中的 ref 我们来看下vue是怎么操作的页面的DOM元素。vue中操作DOM元素是通过ref这个属性来操作的。
<div id="root"> <div ref="hello" @click="hand"> hello </div> </div> <script> new Vue({ el:"#root", methods:{ hand:function(){ console.log(this.$refs.hello) } } }) </script>以上的代码是可以输出div这个DOM元素的，但是这和组件中使用ref有关系吗？我们假设这个div标签是个组件呢？我们来做两个组件相加数值相加的一个功能。
<div id="root"> <item @change="handC" ref="one"></item> <item @change="handC" ref="two"></item> <div>{{total}}</div> </div> <script> Vue.component("item",{ data:function(){ return { num:0 } }, template:"<div @click='hand'>{{num}}</div>", methods:{ hand:function(){ this.num++ this.$emit("change",this.num) } } }) new Vue({ el:"#root", data:{ total:0 }, methods:{ handC:function(res){ this.total = this.$refs.one.num+this.$refs.two.num } } }) </script>4.父组件向子组件传值
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
父组件通过属性的方式来向子组件传递值,子组件用props来进行接收
<div id="root"> <item :count="0"></item> <item :count="1"></item> </div> <script> var item = { props:["count"], template:"<div>{{count}}</div>" } new Vue({ el:"#root", components:{ item:item } }) </script>那么我们来进行一个组件的计算，那么就很自然写以下的代码,
<div id="root"> <item :count="0"></item> <item :count="1"></item> </div> <script> var item = { props:["count"], template:"<div @click='hand'>{{count}}</div>", methods:{ hand:function(){ this.count++ } } } new Vue({ el:"#root", components:{ item:item } }) </script>这个时候,我们的确是可以点击上面的某个组件让值进行计算,但是我们打开控制台就会发现,就会有报错.为什么呢？因为我们违背vue中”单向数据流”的概念。子组件是不可以直接修改父组件传递过来的值，但有些时候,我们必须要进行修改，怎么办呢？
<div id="root"> <item :count="0"></item> <item :count="1"></item> </div> <script> var item = { props:["count"], data:function(){ return { num:this.count } }, template:"<div @click='hand'>{{num}}</div>", methods:{ hand:function(){ this.num++ } } } new Vue({ el:"#root", components:{ item:item } }) </script>我们在以上的代码中,在组件中自定义了一个num一个属性,让它等于父组件传递过来的count,那么我们自己修改组件中值是完全没有问题的。
5.子组件向父组件传值 子组件要想向父组件传值,那么就要通过$emit的方法向父组件传值
<div id="root"> <item :count="0" @change="hanC"></item> <item :count="1" @change="hanC"></item> <div>{{total}}</div> </div> <script> var item = { props:["count"], data:function(){ return { num:this.count } }, template:"<div @click='hand'>{{num}}</div>", methods:{ hand:function(){ this.num++ this.$emit("change",1) } } } new Vue({ el:"#root", data:{ total:1 }, components:{ item:item }, methods:{ hanC:function(res){ this.total += res } } }) </script>