第四节：Vue表单标签和组件的基本用法，父子组件间的通信
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第四节：Vue表单标签和组件的基本用法，父子组件间的通信相关的知识，希望对你有一定的参考价值。
vue表单标签和组件的基本用法，父子组件间的通信，直接看例子吧。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <span>Welcome {{name}} join our home</span><br> <input type="text" v-model="name" placeholder="shannonliang" /> <input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">{{checked}}</label> <br> <span>交通工具：</span> <br> <!--:biz是向子组件传值绑定到了biz上,也可以用v-bind:biz, "biz" 是传的值，即取的是for循环中的biz的值 --> <!--refreshbizlines 是自定义的一个事件类型（这个区分大小写），类似click，直接绑定到了组件上。rebizLines是触发该类型执行的自定义的方法--> <biz-component v-for="biz in bizs" :biz="biz" v-on:refreshbizlines="rebizLines"> </biz-component> <br> <span>{{bizLines}}</span> <br> </div> </body> <script type="text/javascript"> var child = ‘<span><input type="checkbox" :id="biz.type" @click="addBizLines" /><label :for="biz.type">{{biz.description}}</label></span>‘; Vue.component(‘biz-component‘, { //组件的名称也区分大小写；这里注册的时候大写，html标签中就用‘-’，例如 注册：bizComponent，HTML： <biz-component>。否则就都用小写。 // 声明 props props: ["biz"], //接受父组件的传值， // 就像 data 一样，prop 可以用在模板内 template: child, methods: { addBizLines: function(e) { //方法名称不区分大小写 if (e.target.checked) this.$emit(‘refreshbizlines‘, e.target.id, true); //触发父组件中的自定义事件类型(refreshbizlines)绑定的方法，会调用rebizLines方法.后面传的是两个参数。 else { this.$emit(‘refreshbizlines‘, e.target.id, false); } } } }); var app = new Vue({ el: "#app", data: { name: "shnannon", checked: false, bizs: [{ type: "flash", description: "快车" }, { type: "premium", description: "专车" }, { type: "bus", description: "巴士" }], bizLines: [] }, methods: { rebizLines: function(value, isAdd) { if (isAdd) this.$data.bizLines.push(value); else { this.$data.bizLines.splice(this.$data.bizLines.indexOf(value), 1); //splice(i,n,v);i表示删除的数组中开始的位置的索引(包括)，n删除的数组中的个数，v插入数组的值 } } } }); </script> </html>
2、注意
-
biz是向子组件传值绑定到了biz上,也可以用v-bind:biz, "biz" 是传的值，即取的是for循环中的biz的值
-
refreshbizlines 是自定义的一个事件类型（这个区分大小写），类似click，直接绑定到了组件上。rebizLines是触发该类型执行的自定义的方法
-
/组件的名称也区分大小写；这里注册的时候大写，html标签中就用‘-’，例如 注册：bizComponent，HTML： <biz-component>。否则就都用小写
以上是关于第四节：Vue表单标签和组件的基本用法，父子组件间的通信的主要内容，如果未能解决你的问题，请参考以下文章
「 VUE3 + TS + Vite 」父子组件间如何通信？