设置子组件的特性&事件——父组件的特性默认会传递给子组件内的根元素 & 子组件有 props 则不能设置元素的特性
- 封装通用组件的时候使用
- 调用组件的时候给目标标签设置属性
- 调用组件的时候给组件内部的元素设置原生事件
设置属性
父组件的特性默认会传递给子组件内的根元素
- class 和 style 会合并
如果子组件有 props 则不会设置元素的特性
-
父组件设置特性，并和子组件设置 props 重合，不会给元素设置特性，props: [‘required’]
-
inheritAttrs: false禁止子组件的根元素设置特性 -
子组件中通过
$attrs给特定元素设置父组件传过来的特性<input type="text" v-bind="$attrs" class="color">
注意
- 事件不会传递(自定义事件)
- props 中不能定义 class/style (class/style不会传递)
第一步：新建组件文件compotent/input.vue,并初始化
<template>
<!-- <input type="text" class="bg"> -->
<!-- 01.组件调用时候，给组件设置的属性，默认会传递到该组件内部的根元素上 -->
<div>
<!-- <input @input="$emit('input')" @focus="$emit('focus')" type="text" class="bg" v-bind="$attrs"> -->
<input v-on="$listeners" type="text" class="bg" v-bind="$attrs">
</div>
</template>
<script>
export default {
// class和style不能作为props的名字存在
// 02.如果子组件有 props 则不会设置元素的特性
// props: ['placeholder']
// 1. 让根元素不要继承父组件传递过来的属性
inheritAttrs: false,
created () {
console.log(this.$attrs)
}
}
</script>
<style>
</style>
第二步：在入口文件App.vue中进行注册、引入、使用
//引入
import MyInput from ‘./components/02-input’
export default {
name: 'app', components: { //注册
MyInput,
}
}
//使用
5. 封装组件-传递属性
<my-input @input=“handleInput” @focus=“handleFocus” placeholder=“请输入…” maxlength=“5” class=“my”>
App.vue中：
<template>
<div id="app">
<demo ref="d"></demo>
<h1>3. 访问子组件</h1>
<input type="button" value="子组件" @click="handle">
<!-- 5. 封装组件 -->
<h1>5. 封装组件-传递属性</h1>
<!-- my-input是自定义组件，input/focus 都是自定义事件 -->
//placeholder 属性提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
<my-input @input="handleInput" @focus="handleFocus" placeholder="请输入..." maxlength="5" class="my"></my-input>
<!-- 6. 动态组件和异步组件 -->
<h1>6. 动态组件和异步组件</h1>
<input type="button" value="登录" @click="componentId='Login'">
<input type="button" value="注册" @click="componentId='Register'">
<keep-alive>
<component :is="componentId"></component>
</keep-alive>
<h1>7. 模态框组件</h1>
<input type="button" value="modal" @click="showModal=true">
<!--
$event 只能在视图中使用
$event 是事件参数
v-model 等价于
v-bind:value="searchText"
v-on:input="searchText = $event"
-->
<my-modal v-model="showModal" @test="test"></my-modal>
<input type="button" value="js方法调用" @click="$modal">
</div>
</template>
<script>
import Demo from './components/01-demo'
import MyInput from './components/02-input'
// import Login from './components/03-login'
// import Register from './components/04-register'
import MyModal from './components/modal/index.vue'
export default {
name: 'app',
components: {
Demo,
MyInput,
// 异步组件
Login: () => import('./components/03-login'),
Register: () => import('./components/04-register'),
MyModal
},
data () {
return {
name: 'xxx',
age: 19,
// 导入组件的名字，是字符串形式
componentId: 'Login',
showModal: false
}
},
methods: {
// test (value) {
// },
handle () {
// this.$children -- 数组
// console.log(this)
// 组件对象
// console.log(this.$refs.d)
this.$refs.d.focus()
console.log(this.$refs.d.msg)
},
handleInput () {
console.log('handleInput')
},
handleFocus () {
console.log('handleFocus')
}
},
// 依赖注入
// 父组件中提供成员
provide () {
return {
myMsg: '演示依赖注入',
getMap () {
console.log('getMap')
}
}
}
}
</script>
<style>
</style>
