vue中父子组件注意事项,传值及槽应用技巧

　　

　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title>父子组件传值& lt;/title> 　　& lt; style> 　　& lt;/style> 　　& lt;脚本src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=案北? 　　& lt;计数器:数=" 0 " @numberchange=癶andleChange祝辞& lt;/counter> 　　& lt;计数器:数=" 0 " @numberchange=癶andleChange祝辞& lt;/counter> 　　& lt; div>{{总}}& lt;/div> 　　& lt; validate-content内容=癶ello world”祝辞& lt;/validate-content> 　　& lt;/div> 　　& lt; script>//父组件向子组件传值用道具、加:号后传递的为js表达式,示例中则为数字,不加:号代表的是字符串 　　var counter={//局部注册 　　道具:“数”, 　　数据:函数(){//在子组件中定义数据,数据不能是对象,必须是一个函数。 　　返回{ 　　数量:this.count 　　} 　　}, 　　模板:“& lt; div @click=癶andleClick2”在{{号码}}& lt;/div>”, 　　方法:{ 　　handleClick2:函数(){ 　　这一点。+ +;//this.count + +;父组件可以传值给子组件,但子组件不可以修改父组件属性,这里这么写会报的错。 　　美元。排放(“numberchange”, this.number);//子组件向父组件传递事件,值 　　} 　　} 　　} 　　var validateContent={ 　　道具:{//内容(数字、字符串)://组件参数校验,可以多选 　　内容:{//组件参数校验 　　类型:字符串, 　　要求:没错, 　　默认值:“默认值”, 　　验证器:功能(价值){ 　　返回值。长度比;5 　　} 　　} 　　}, 　　模板:“& lt; div的在{{内容}}& lt;/div>”, 　　} 　　var vm=new Vue ({ 　　埃尔:“#根”, 　　数据:{ 　　总:0 　　}, 　　方法:{ 　　handleChange:函数(数量){ 　　console.log(数量)//这个。总+=1; 　　} 　　}, 　　组件:{ 　　计数器,//局部注册要在根节点注册组件 　　validateContent 　　} 　　}） 　　& lt;/script> 　　& lt;/body> 　　& lt;/html> 　　 　　

　　

先看一个示例

　　 　　 　　& lt; body> 　　& lt; div id=案北? 　　& lt; child> & lt; p> Qin

& lt;/child> 　　& lt;/div> 　　& lt; script> 　　让孩子={ 　　模板:“& lt; div> 　　& lt; p>你好world

　　& lt;/div> 　　} 　　var vm=new Vue ({ 　　埃尔:“#根”, 　　组件:{ 　　孩子 　　} 　　}） 　　& lt;/script> 　　& lt;/body> 　　 　　

打开查看器查看一下

　　

vue中父子组件注意事项,传值及槽应用技巧

　　

发现秦不见了
　　

　　

<代码> & lt; p> Qin

1

　　

查看官方文档,,,https://cn.vuejs.org/v2/guide/components-slots.html 

　　

我们得出结论:如果孩子没有包含一个& lt;槽比;元素,则任何传入它的内容都会被抛弃

　　

,我们加入插槽

　　 　　 　　& lt; body> 　　& lt; div id=案北? 　　& lt; child> & lt; p> Qin

& lt;/child> 　　& lt;/div> 　　& lt; script> 　　让孩子={ 　　模板:“& lt; div> 　　& lt; p>你好world

　　& lt; slot> & lt;/slot> 　　& lt;/div> 　　} 　　var vm=new Vue ({ 　　埃尔:“#根”, 　　组件:{ 　　孩子 　　} 　　}） 　　& lt;/script> 　　& lt;/body> 　　 　　

发现秦能正常显示,且槽将会被替换为解析后的片段& lt;p比;秦& lt;/p在

　　

vue中父子组件注意事项,传值及槽应用技巧

　　

当父组件不向子组件传值的时候,槽还可以作为父组件默认值出现
　　

　　 　　 　　& lt; body> 　　& lt; div id=案北? 　　& lt; child> & lt;/child> 　　& lt;/div> 　　& lt; script> 　　让孩子={ 　　模板:“& lt; div> 　　& lt; p>你好world

　　& lt; slot>默认value 　　& lt;/div> 　　} 　　var vm=new Vue ({ 　　埃尔:“#根”, 　　组件:{ 　　孩子 　　} 　　}） 　　& lt;/script> 　　& lt;/body> 　　 　　

效果图 　　

vue中父子组件注意事项,传值及槽应用技巧

　　

　　

,如果想使用多个插槽,我们先看看效果:

　　 　　 　　& lt; body> 　　& lt; div id=案北? 　　& lt; child> 　　& lt; header>这是header

vue中父子组件注意事项,传值及槽应用技巧