Vue脚手架(二) - 技术栈

一、ref属性

(1) 被用来给元素或子组件注册引用信息(id的代替者)

(2) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)

(3) 使用方式:

打标识: <h1 ref="xxx"></h1> 或 <School ref="xxx"></School>

获取: this.$refs.xxx

二、配置项props

功能: 让组件接受外部传过来的数据

(1) 传递数据: <Demo name="xxx" />

(2) 接收数据:

a、第一种方式(只接收): props: ["name"]

b、第二种方式(限制类型): props: {name: String}

c、第三种方式(限制类型、限制必要性、指定默认值)

javascript 复制代码

props: {
    name: {
        type: String, // 类型
        required: true, // 必要性
        default: '111' // 默认值
    }
}

备注: props是只读的, Vue底层会监测你对props的修改,如果进行了修改,就会发出警告;若业务需求确实需要修改,那么请复制props中的内容到data中一份,然后去修改data中的数据

三、mixin(混入)

功能: 可以把多个组件共用的配置提取成一个混入对象

使用方式

a、第一步定义混合

javascript 复制代码

{

    data() {...},

    methods:{...},

    ...

}

b、第二步使用混入

全局混入: Vue.mixin(xxx)

局部混入: mixins: ['xxx']

四、插件

功能: 用于增强Vue

本质: 包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据.

定义插件:

对象.install = function(Vue, options) {

// 1、添加全局过滤器

Vue.filter(...)

// 2、添加全局指令

Vue.directive(...)

// 3、配置全局混入

Vue.mixin(...)

// 4、添加实例方法

Vue.prototype.$myMethod = function() {...}

Vue.prototype.$myProperty = xxx;

}

使用插件: Vue.use(插件名)

五、scoped样式

作用: 让样式在局部生效,防止冲突

写法: <style scoped></style>

六、总结实践案例

(1) 组件化编码流程

拆分静态组件: 组件要按照功能点拆分,命名不要与html元素冲突
实现动态组件: 考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用

如果是一个组件在用,放在组件自身即可;若是一些组件在用,放在他们共同的父组件上(状态提升)

实现交互: 从绑定事件开始

(2) props适用于

父组件 ==> 子组件通信
子组件 ==> 父组件通信(要求父先给子一个函数)

(3) 使用v-model时要切记: v-model绑定的值不能是props传过来的值,因为props是不可以修改的

(4) props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做