Vue关总结于组件化开发知识点

　　介绍

这篇文章主要总结Vue关于组件化开发知识点,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

<强>全局组件注册

Vue.component (& # 39; first-component& # 39;, { 　　数据:函数(){ 　　返回{ 　　数:0 　　} 　　}， 　　模板:& # 39;& lt;按钮@click=笆? +“在{{数}}& lt;/button> & # 39; 　　})

数据必须是一个函数

组件模板内容必须是单个根元素

组件模板内容可以是模板字符串

全局组件可以嵌套全局组件

组件命名方式

Vue.component (& # 39; first-component& # 39;, {/* ....*/})//普通标签模板中不能使用驼峰,只能在模板中使用驼峰方式 　　Vue.component (& # 39; firstComponent& # 39;, {/* ....*/})

<强>局部组件注册

局部注册的组件只能在父组件中使用;

 var vm=new Vue ({
　　组件:{
　　& # 39;hello-world& # 39;: {
　　数据:函数(){
　　返回{
　　味精:& # 39;你好& # 39;
　　}
　　}，
　　模板:& # 39;& lt; div>{{味精}}& lt;/div> & # 39;
　　}
　　}
　　})

道具传递数据原则:单向数据流

组件内部通过道具接收传递过来的值

Vue.component (& # 39; son-com& # 39;, { 　　道具:[& # 39;味精# 39;& # 39;parentMsg& # 39;】 　　模板:& # 39;& lt; div>{{味精+“——产生绯闻;+ parentMsg}} & lt;/div> & # 39; 　　})

父组件通过属性将值传递给子组件

& lt; son-com味精=案缸榧闹?:parent-msg=鞍蠖ò蠖ǖ母缸榧闹怠白４? lt;/son-com>

<强>道具属性名规则

    <李>在道具中使用驼峰形式,模板中需要使用短横线的形式;html对大小写的不敏感的李 <>李字符串中没有这个限制
    　　李,

<强>道具传递类型

& lt; div id=癮pp"比; 　　& lt; son-com 　　:str=皃str" 　　:num=皃num"& lt; !——注意如果不用v-bind则获取不到准确的属性值——比; 　　:布尔=皃boolean" 　　:arr=? parr" 　　:obj=皃obj" 　　比; 　　& lt;/son-com> 　　& lt;/div> Vue.component (& # 39; son-com& # 39;, { 　　道具:[& # 39;str # 39; & # 39; num # 39;, & # 39;布尔# 39;,& # 39;arr # 39;, & # 39; obj # 39;], 　　模板: 　　& lt; div> 　　& lt; div> {{str}} & lt;/div> 　　& lt; div> {{num}} & lt;/div> 　　& lt; div>{{布尔}}& lt;/div> 　　& lt; ul> 　　& lt;李:关键=癷ndex"v代表=癮rr"(项目、索引);在{{项}}& lt;/li> 　　& lt;/ul> 　　& lt; div> 　　& lt; span> {{obj.name}} & lt;/span> 　　& lt; span> {{obj。年龄}}& lt;/span> 　　& lt;/div> 　　& lt;/div> 　　” 　　}) 
 var vm=new Vue ({
　　艾尔:& # 39;#应用# 39;
　　数据:{
　　pstr: & # 39;你好vue # 39;
　　pnum: 12,
　　pboolean:没错,
　　帕尔:[& # 39;苹果# 39;& # 39;旗帜# 39;,& # 39;橙色# 39;],
　　pobj:{名称:& # 39;z # 39;,年龄:22}
　　}
　　})

<强>子组件向父组件传值

子组件通过自定义事件向父组件传值美元发出()

Vue.component (& # 39; son-com& # 39;, { 　　模板: 　　& lt; div> 　　& lt;按钮@click=笆头琶涝?& # 39;父母# 39;)“在点击放大父组件字体& lt;/button> 　　传值从第二个参数开始 　　& lt;按钮@click=笆头琶涝?& # 39;父母# 39;10)“在点击放大父组件字体& lt;/button> 　　& lt;/div> 　　” 　　})

<>强父组件监听子组件事件

& lt; div id=癮pp"比; 　　& lt; div>父组件& lt;/div> 　　@ parent=& lt; son-com“handle"祝辞& lt;/son-com> 　　& lt; !——接收值为固定事件美元——比; 　　@ parent=& lt; son-com“处理(事件)美元“祝辞& lt;/son-com> 　　& lt;/div> 
 var vm=new Vue ({
　　艾尔:& # 39;#应用# 39;
　　数据:{
　　字体:10
　　}，
　　方法:{
　　处理:函数(val) {
　　这一点。字体+=5
　　这一点。字体+=val//此时的val就是子组件传递过来的值
　　}
　　}，
　　})

<>强非父子组件传值

单独的事件中心管理组件之间的通信

//创建事件中心
　　var=new Vue中心()//在安装中监听事件
　　中心。在美元(& # 39;eventName& # 39;, fn)
　　中心。美元(& # 39;eventName& # 39;)//销毁事件//在方法中处理事件
　　中心。美元发出(& # 39;eventName& # 39;, param)

<强>组件插槽

& lt; tmp-com> 　　& lt; !——只能匹配一个标签——比; 　　& lt; p槽=癶eader"祝辞程序错误& lt;/p> 　　& lt; div>我是没有匹配的内容& lt;/div> 　　& lt; !——可以匹配多个标签——比; 　　& lt;模板槽=癴ooter"祝辞 　　& lt; p>匹配页脚一次& lt;/p> 　　& lt; p>匹配页脚两次& lt;/p> 　　& lt;/template> 　　& lt;/tmp-com>

Vue关总结于组件化开发知识点