Vue笔记【props、混入】

24.props配置

使用props配置可以接收其他组件传过来的数据，让组件的数据变为动态数据，三种接收方式。

1. 简单接收

   props:[‘brand’,‘price’,‘color’]

示例代码

特别说明:此代码运行在脚手架的环境中。

• App.vue

<template>
    <div>
        <h1>{{msg}}</h1>
        <Car brand="宝马" :price="10" color="黑色" ref="car1"></Car>
        <hr>
        <Car brand="兰博基尼" :price="20" color="红色"></Car>
        <button @click="printCarInfo">打印汽车信息</button>
    </div>
</template>

<script>
    import Car from './components/Car.vue'
    export default {
        data() {
            return {
                msg:'汽车信息'
            }
        },
        methods: {
            printCarInfo() {
                //从父组件中获取子组件的数据，
                //第一步：打标记，在需要获取的子组件上用ref打上标记
                //第二步获取，this.$refs获取所有的组件
                //第三步，this.$refs.标记名.属性即可
                console.log(this.$refs.car1.brand);
                console.log(this.$refs.car1.price);
                console.log(this.$refs.car1.color);
            }
        },
        // 注册组件
        components : {Car}
    }
</script>

• Car.vue

<template>
    <div>
        <h3>汽车品牌:{{brand}}</h3>
        <h3>汽车价格:{{price}}</h3>
        <h3>汽车颜色:{{color}}</h3>
    </div>
</template>

<script>
export default {
    name: 'Car',
    props:['brand','price','color']
}
</script>

运行结果

运行结果中我们可以看到Car组件获取到了App组件中提交的数据。

2. 接收时添加类型限制

   这种方式多了一个限制了提交数据的数据类型，如果提交的类型不一致，会有错误提示。示例代码和上面的代码几乎一致，这里不再演示。

​ props: {

​ brand: String,

​ price:Number,

​ color: String

​ }

3. 接收时添加类型限制，必要性限制，默认值

   这种方式用的比较多，添加了数据的必要性和默认值，更符合后端数据库的数据。示例代码和第一种方式相似，这里不再演示。

​ props: {
​ brand: {
​ type: String,
​ required:true
​ },
​ price: {
​ type: Number,
​ default: 100
​ },
​ color: {
​ type: String,
​ default:‘银色’
​ }
​ }

注意事项：

1.不要乱接收，接收的一定是其它组件提供的。

2.props 接收到的数据不能修改。（修改之后会报错，但页面会刷新。）可以找个中间变量来解决。

25.混入(mixin)

混入就是把两个组件methods中相同功能的代码抽离出来，写在一个js文件中，利用混入导入到各个组件中。

假如我们两个组件中都有打印用户信息的功能，我们可以把打印用户功能的代码写在一个js代码文件中，然后利用混入导入到组件中。

25.1局部混入

我们把相同功能的代码抽离到一个js文件中。

export const mix1 = {
    //相同功能的代码
   ...
}

组件混入

export default {
        name: '组件名',
        data() {
            return {
                ...
            }
        },
    //混入
        mixins : [mix1],
    }

25.2全局混入

在main.js(Vue的执行入口文件)中配置全局混入

1. 导入混入

   import {} from '配置的混入js文件的文件名'
   

2. 配置全局混入

   Vue.mixin(混入的名字)