VUE
class绑定
style绑定
侦听器
表单输入绑定 v-model
修饰符:lazy,number,trim
模版引用
操作dom,获取ref
this.$ref
<div ref="container" class="containser">{{content}}</div><input type="text" ref="username"><button @click="getElimentHandle">获取元素</button>
data(){return{content:'内容'}},methods:{getElimentHandle(){this.$refs.container.innerHTML ="哈哈";console.log(this.$ref.username.value);}}
组件的组成
scoped 作用域:只在当前组件生效
组件注册方式
全局方式(main.js)
局部方式:单文件内使用
组件传递数据 props (父传子)
(可传任何类型数据)
父组件,可动态传递数据
子组件
组件传递props
default 默认值,type 类型,required 必选项
子类无法修改父类传来的数据
父组件
<h3>ComponentA</h3><ComponentB :title="title" :age="age" :names="names"/>
import ComponentB from './cb.vue'export default{data(){return {title: '标题',age:18,names:["male","female"]}},components:{ComponentB}}
子组件
<h3>ComponentB</h3><p>{{ title }}</p><p>{{ age }}</p><p v-for="(item, index) of names" :key="index">{{ item }}</p>
export default {data() {return {}},props: {title: {type: [String, Number, Array, Object],default: 'Component',required: true},age: {type: Number,default: 18,},//数组和对象,必须通过工厂函数返回默认值names: {type: Array,default(){return ["空"]}}}
this.$emit(子传父)
父组件
子组件
组件事件与v-model
props传递,自定义事件,子传父
透传Attributes (....)
本文来自博客园,作者:hellowworld!,转载请注明原文链接:https://www.cnblogs.com/zhangsai/p/17643472.html
posted on 2023-08-20 00:01 hellowworld! 阅读(7) 评论(0) 编辑 收藏 举报