组件v-model双向数据绑定
- v-model 一般用于 input 标签的双向数据绑定
- 对于组件如何实现双向数据绑定?比如重新 input标签功能
- 自定义组件MyInput.vue 实现双向数据绑定
MyInput.vue组件 完成input标签的双向数据绑定
<template>
<div>
<!--当input标签值改动的时候,触发事件myInput,传递参数;"update:事件名称"固定写法;-->
<input type="text" :value="myInput" @input="$emit('update:myInput',$event.target.value)"/>
</div>
</template>
<script>
export default {
props:{
myInput:{
type: String
}
}
}
</script>
Home.vue 组件使用MyInput.vue组件时,双向数据绑定
<template>
<div>
主页面列表信息,组件实现双向数据绑定
<hr>
<br>
<br>
<!--组件上双向数据绑定必须,v-model:myInput 其中myInput是,组件定义的props属性;内部也会定义myInput事件-->
<my-input v-model:myInput="msg"></my-input>
<br>
<br>
{{msg}}
</div>
</template>
<script>
import MyInput from './views/MyInput.vue'
export default {
data() {
return {
msg: '信息内容'
}
},
components:{
MyInput
}
}
</script>
组件v-model可以双向数据绑定多个值
组件绑定多个值 MyInput.vue
<template>
<div>
<input type="text" :value="myInput" @input="$emit('update:myInput',$event.target.value)"/>
<input type="number" :value="myAge" @input="$emit('update:myAge',$event.target.value)"/>
</div>
</template>
<script>
export default {
props:["myInput","myAge"]
}
</script>
组件Home.vue使用MyInput.vue 双向绑定多个值
<template>
<div>
主页面列表信息,组件实现双向数据绑定
<hr>
<br>
<br>
<my-input v-model:myInput="name" v-model:myAge="age"></my-input>
<br>
<br>
{{name}}--{{age}}
</div>
</template>
<script>
import MyInput from './views/MyInput.vue'
export default {
data() {
return {
name: 'jake',
age: 23
}
},
components:{
MyInput
}
}
</script>
组件Slot插槽
- 当组件内容体需要有外部指定时,可在组件中定义Slot 插槽
- Slot 可以传递字符串、HTML标签及组件
- Slot可以有默认值
- 组件内部哪里需要替换(外部指定时),定义Default
案例 按钮 组件Slot,按钮名称由外部指定 MyButton.vue
<template>
<button>
<slot>Default</slot>
</button>
</template>
<script>
export default {
methods: {
},
}
</script>
Home.vue 使用插件MyButton.vue,指定Slot内容
<template>
<div>
主页面列表信息,组件 Slot案例
<hr>
<br>
<br>
<my-button></my-button>
<br>
<my-button>保存</my-button>
<br>
<my-button>删除</my-button>
<br>
<my-button><i>Icron</i>发布</my-button>
</div>
</template>
<script>
import MyButton from './views/button/MyButton.vue'
export default {
data() {
return {
}
},
components:{
MyButton
}
}
</script>