简述Vue组件使用的3个步骤?,vue中组件的概念
本文主要介绍Vue的组成。本文通过示例代码向您详细介绍，具有一定的参考价值。有需要的朋友可以参考一下。
一.组件的注册部件的使用。从父母传给孩子。从孩子传给父亲。从子组件传递到插槽的值汇总
目录
组件注册需要注意的有五点：
1.数据要写成函数，用return返回一个值，这样不同的调用就不会互相影响。
2.模板后面是一个浮动符号，它是Tab上面的键。
3.模板后面的内容要写在一个大div里，不要把多个div分开。
4.阵在道具后面，因为道具多。
5.将其保存为js文件
Vue.component(myson ，{
data(){
返回{
儿子：“你好，儿子”
}
},
模板：` 1
差异
p组分含量/p
属性接收值：{{sonprop}}
/div
`,
道具：[sonprop]，
方法：{
sonclick(){
这个。$emit(sonemit ，this.sonmsg)
}
}
})
一、组件的注册
只要你用的时候注意，先参考vue，再参考子组件。
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题/标题
脚本类型= text/JavaScript src= js/vue . js /script
脚本类型= text/js /script src= 00-component-child . js /script
/头
身体
div id=应用程序
迈森/迈森
/div
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
parent msg:“parent msg到sonprop”
}
})
/脚本
/body
/html
二、组件的使用
路过世代相传很简单，分两步走。
1、在组件里定义prop
道具：[sonprop]
2、使用组件时，用定义的prop绑定父的值
my son:son prop= parent msg /my son
父代中的值是这样的。
数据：{
parent msg:“parent msg到sonprop”
}
详细的发货流程是这样的。看起来很复杂，其实只是上面说的两个步骤。
三、父传子
组件传递给父级的值应通过方法传递。父节点和子节点各自定义一个方法，然后使用一个中间方法进行连接。只需要记住这个中间方法的使用，步骤详细分解。
1.在子组件模板的按钮中使用click事件。
Button @click=sonclick 按钮/按钮
2.在子组件中定义上述方法，触发中间方法并传输数据。
sonclick(){
这个。$emit(sonemit ，this.sonmsg)
}
3.当父组件使用子组件时，它将自己的方法与中间方法绑定在一起。
my son @ son emit= parent click /my son
4.在父方法中接收数据，其中p可以写成任意字符。
parent单击(p){
VM . parent msg=p；
}
详细代码图
运行效果
四、子传父
1、加入插槽，插槽就是在组件中留一个空间，使用组件时可以插入任何东西。
在某个子组件中定义：slot/slot
使用组件时，可以在此位置添加任何标签。
2.当添加多个插槽时，命名每个插槽，并在使用时将每个插槽放入模板中。
定义多个插槽
模板：` 1
差异
p组件内容：{{sonmsg}}/p
p分隔线11111111111111/p/p
插槽名称=a1/slot
p分离管线222222/p
插槽名称=a2/slot
p分隔线3333333/p
/div
`,
使用多个插槽，一个模板和一个插槽。
模板槽=a1
按钮a1/按钮
/模板
模板槽=a2
按钮a2/按钮
/模板
五、插槽
1.在子组件模板中定义中间数据emitmsg，可以使用任何名称。
slot name= a1 :emit msg= sonmsg /slot
2.接收父组件中的res。不管子组件有多少，都是用res接收的，就是结果集。如果有多个插槽，数据将在其中。
模板slot=a1 slot-scope=res
{{res.emitmsg}}
/模板
代码展示
显示效果：
六、子组件给插槽传值
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。