父组件向子组件通信
第一步，引用子组件的时候传入数据
new Vue({
el: "#app",
data: {
count: 0,
fatherlist: ["武汉", "深圳", "广州"]
}
})
<custom-select :list="fatherlist">
<div>子组件</div>
</custom-select>
第二步，在子组件中显示声明拥有该属性
props: {
list: {
type: Array // 定义属性的类型，多类型用[], 如[String, Number]
// default: [], // 默认值
// required: true //必传参数
// validator(value){ //验证规则
// return value.length > 0;
// }
}
}
第三步，子组件使用数据
<select>
<option v-for="item in list">{{ item }}</option>
</select>
子组件向父组件通信
第一步，父组件定义执行方法
methods: {
countHandle(){
console.log("子组件点击了");
}
}
第二步，在子组件中绑定事件
<custom-select :list="fatherlist" @increment-click="countHandle"></custom-select>
第三步，在子组件中触发事件
<input type="button" value="改变count的值" @click="changeCount"/>
methods: {
changeCount(){
// 通知父组件执行事件
this.$emit("increment-click");
}
}
