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>。否则就都用小写
时间： 2024-10-21 20:49:26