通过 props 父逐渐向子组件传递数据
父组件到子组件的通讯主要为：子组件接受使用父组件的数据。父子通讯中最常见的数据传递方式就是通过props传递数据，就好像方法的传参一样，父组件调用子组件并传入数据，子组件接受到父组件传递的数据进行验证使用。props的数据包括属性和方法
String,Number,Boolean,Object,Array,Function.
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
[v-cloak] {
display: none;
}
.red {
background: red;
color: #fff;
border: none;
}
.green {
background: green;
color: #fff;
border: none;
}
</style>
<body>
<div id="app" v-cloak>
<btn>登陆</btn>
<btn type='danger'>登陆</btn>
<btn type='success'>登陆</btn>
<hr>
<zzz label='asdf' :icon='111'></zzz>
<zzz :icon='111'></zzz>
<zzz label="['ab','cd']" :icon='111'></zzz>
</div>
<!-- 组件中模版的另外一种写法 -->
<template id='temp'>
<div>
{{label}}--{{icon}}
</div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script>
Vue.component('btn', {
props: {
type: {
type: String,
default: 'default',
validator(val) { // validator 验证器
return ['deafult', 'danger', 'success'].includes(val)
}
}
},
template:
`
<button :class="{black:type==='deafult' , red:type==='danger', green:type==='success'}">
<slot></slot>
</button>
`,
})
//全局组件
Vue.component('zzz', {
props: {
label: {
type: String | Array,
default: '标题' //default默认值
},
icon: {
type: Number,
required: true //required必传
}
},
template: '#temp',
})
new Vue({
el: "#app",
data() {
return {
}
},
})
</script>
</body>
通过$emit子组件向父组件传递事件
<div id="app" v-cloak>
<input type="text" v-model.number='count1'>
<hr>
<zzz :count='count1' @show-count='showCount'></zzz>
</div>
Vue.component('zzz', {
//组件内部不能修改props的值
props: {
count: {
type: Number,
default: 0
}
},
template: `
<h1>{{count}}
<button @click='setCount'>组件按钮点击改变</button>
</h1>
`,
methods: {
setCount(){
//vue提供的用于触发本组件自定义事件的方法
this.$emit('show-count',2021)
}
},
})
new Vue({
el: "#app",
data() {
return {
count1:21
}
},
methods: {
//data是组件内部传过来的值
showCount(data){
this.count1 = data
}
},
})
