微信编辑小程序_vue单页开发父子组件传值思路详解

  • 栏目:行业动态 时间:2021-01-08 14:55 分享新闻到:
<返回列表

vue单页开发父子组件传值思路详解       这篇文章主要介绍了vue单页开发父子组件传值思路详解,本文是小编抽空整理的思路,感兴趣的朋友跟随凡科小编一起学习吧

vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。

文件目录如下图,example.vue是父组件,exampleChild.vue是子组件。

父组件引入子组件,父组件html的代码如下:

 template 
 div 
 h3 这是父组件 /h3 
 span 子组件传过来的值是 “{{childValue}}” /span 
 example-child v-bind:message="parentMsg" @getChildValue="getValue" /example-child 
 /div 
 /template 
 script 
 import exampleChild from './examplechild.vue'; 
 export default { 
 name: "example.vue", 
 components: { 
 exampleChild 
 data(){ 
 return { 
 parentMsg:'hello', 
 childValue:'' 
 mounted(){ 
 methods: { 
 getValue:function (val) { 
 this.childValue = val; 
 /script 
 style scoped 
 /style 

子组件代码如下:

 template 
 div 
 p 我是子组件,父组件穿传过来的值是{{message}} /p 
 button @click="send" 点击向父组件传值 /button 
 /div 
 /template 
 script 
 export default { 
 name: "exampleChild.vue", 
 pro凡科抠图:['message'], 
 data(){ 
 return { 
 mounted(){ 
 methods: { 
 send:function () { 
 this.$emit('getChildValue','你好父组件!') 
 /script 
 style scoped 
 /style 

1,父组件向子组件传值。

在父组件中使用v-bind来绑定数据传给子组件,如我写的v-bind:message="parentMsg",把message字段传给子组件,

在子组件中使用pro凡科抠图接收值,如pro凡科抠图:['message'],接收父组件传过来的message字段,使用{{message}}就是可以使用父组件传过来的值了。

2,子组件向父组件传值。

子向父传值需要一个“中转站”,如我写的getChildValue,命名随便写。

在子组件中使用$emit()来向父组件传值。第一个参数就是这个“中转站”,后面的参数是要传的值,可以是多个。

在父组件中如下,也需要这个中转站来接收值

getValue是接收子组件值的函数,参数val就是子组件传过来的值,这样就可以接收到子组件传过来的值了。

总结

以上所述是小编给大家介绍的vue单页开发父子组件传值思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


分享新闻到:

更多阅读

微信编辑小程序_vue单页开发父子组件传值

行业动态 2021-01-08
vue宣传单页开发设计父子俩部件传值构思详细说明 本文关键详细介绍了vue宣传单页开发...
查看全文

如何推广小程序_js操作table中tr的顺序完成

行业动态 2021-01-08
js实际操作table中tr的次序完成上移下移一行的实际效果 本文关键详细介绍了js实际操作...
查看全文

卢湾企业网站建设-石家庄市VI设计

行业动态 2021-01-08
当今部位: > 新闻报道动态性 > 爵视动态性 > Jazzad News爵视动态性设计方案课堂教学(二)行为主...
查看全文
返回全部新闻


区域站点: 南丰县如何创建网站   南宫市建站公司   囊谦县建网站   南和县一键建站   南华县如何创建网站   南江县建站公司   南京市建网站   南靖县一键建站   南康市如何创建网站   南乐县建站公司   南陵县建网站   南宁市一键建站   南平市如何创建网站   南皮县建站公司   南市区建网站   南通市一键建站   南投县如何创建网站   南雄市建站公司   南溪县建网站   南阳市一键建站   南漳县如何创建网站   南召县建站公司   南郑县建网站   那坡县一键建站   那曲县如何创建网站   纳雍县建站公司   讷河市建网站   内黄县一键建站   内江市如何创建网站   内丘县建站公司   内乡县建网站   嫩江市一键建站   聂荣县如何创建网站   尼玛县建站公司   尼木县建网站   宁安市一键建站   宁波市如何创建网站   宁城县建站公司   宁德市建网站   宁都县一键建站   宁国市如何创建网站   宁海县建站公司   宁化县建网站   宁晋县一键建站   宁陵县如何创建网站   宁明县建站公司   宁南县建网站   宁强县一键建站   宁陕县如何创建网站   宁武县建站公司   宁乡市建网站   宁阳县一键建站   宁远县如何创建网站   农安县建站公司   磐安县建网站   盘锦市一键建站   盘山县如何创建网站   磐石市建站公司   盘州市建网站   蓬安县一键建站   澎湖县如何创建网站   蓬莱市建站公司   彭山县建网站   蓬溪县一键建站   彭阳县如何创建网站   彭泽县建站公司   彭州市建网站   偏关县一键建站   平安县如何创建网站   平昌县建站公司   平定县建网站   屏东县一键建站   平度市如何创建网站   平果县建站公司   平和县建网站   平湖市一键建站   平江县如何创建网站   平乐县建站公司   平凉市建网站   平利县一键建站   平罗县如何创建网站   平陆县建站公司   屏南县建网站   平泉市一键建站   屏山县如何创建网站   平顺县建站公司   平塘县建网站   平潭县一键建站   平武县如何创建网站   萍乡市建站公司   平乡县建网站   平阳县一键建站   平遥县如何创建网站   平阴县建站公司   平邑县建网站   平远县一键建站   平舆县如何创建网站   皮山县建站公司   普安县建网站   浦北县一键建站   浦城县如何创建网站   普洱市建站公司   普格县建网站   浦江县一键建站   普兰县如何创建网站   普宁市建站公司   莆田市建网站   迁安市一键建站   乾安县如何创建网站   潜江市建站公司   潜山市建网站  

友情链接: 自助建站 怎么自己建网站 免费网站建设 外包建站公司

Copyright © 2002-2020 建网站_一键建站_如何创建网站_建站公司_个人博客免费建站平台 版权所有 (网站地图) 备案号:粤ICP备10235580号