vue学习-04vue的props配置项和mixin混入

今天仍然就是敲vue的一个demo，vue的props配置项和mixin混入

props配置项

Vue.js 中的 props 是用于在父组件向子组件传递数据的配置项。通过 props，你可以将父组件中的数据传递给子组件，并在子组件中使用这些数据。以下是关于 props 配置项的一些重要信息：

父组件向子组件传递数据： 通过在子组件的 props 中声明属性，可以告诉Vue.js你希望从父组件传递哪些数据到子组件。这些属性可以是父组件中的任何数据。

props 声明： 在子组件中，你需要使用 props 选项来声明接收哪些属性。这通常在子组件的选项中进行定义。例如：

Vue.component('child-component', {
  props: ['message'],
  template: '
{{ message }}
'
})
1
2
3
4

在上面的示例中，props 数组中的 ‘message’ 属性告诉子组件可以接收名为 ‘message’ 的属性。

传递数据： 在父组件中，通过将数据绑定到子组件的属性来传递数据。例如：

<child-component :message="parentMessage"></child-component>
1

这里 parentMessage 是父组件中的数据，它通过 :message 绑定到子组件的 message 属性。

子组件中使用 props 数据： 在子组件的模板中，你可以像使用本地数据一样使用 props 数据。例如：

<template>
  <p>{{ message }}p>
template>
1
2
3

<script>
export default {
  props: ['message']
}
</script>
1
2
3
4
5

子组件通过 this.message 来访问传递过来的属性数据。

props 类型和验证： 你可以为 props 指定类型和验证规则，以确保传递的数据符合预期。例如：

props: {
  message: String, // 数据类型为字符串
  count: {
    type: Number, // 数据类型为数字
    required: true // 必须传递
  }
}
1
2
3
4
5
6
7

在上面的示例中，message 必须是字符串类型，而 count 必须是数字类型且必须传递。

通过使用 props，你可以有效地实现父子组件之间的数据传递和通信，使你的Vue.js应用程序更加模块化和可维护。
App.vue

<template>
    <div>
        <h1 class="demo2" v-text="message">h1>
        
        <Student name="张三" :age="18" sex="男">Student>
        <hr/>
        <h1 class="demo2">人员列表h1>
        <ul class="persons">
            <li>姓名    性别    年龄li>
            <li v-for="(person,index) in persons" :key="index">
                {{person.name}}    {{person.sex}}     {{person.age}}
            li>
        ul>
    div>
template>

<script>
    //导入Student组件
    import Student from './components/Student.vue'
    //暴露组件
    export default {
        name: 'App',
        components:{
            Student
        },
        data(){
           return {
                message: '欢迎学习Vue教程！',
                persons:[
                    {name:'萧炎',sex:'男',age:18},
                    {name:'萧薰儿',sex:'女',age:16},
                    {name:'唐三',sex:'男',age:20},
                    {name:'小舞',sex:'女',age:17}
                ]
           }
        }
    }
script>

<style>
    .demo2{
        background-color: green;
        text-align: center;
    }
    li{
        list-style-type: none;/*去除列表的小黑点*/
        text-align: center;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

components/Student.vue

<template>
    <div class="demo">
        <h2>学生姓名:{{name}}h2>
        <h2>性别:{{sex}}h2>
        <h2>年龄:{{myAge}}h2>
        <button @click="updateAge">尝试修改收到的年龄button>
    div>
template>

<script>
    //暴露组件
    export default {
        name: 'Student',
        data(){
            return{
                myAge:this.age
            }
        },
        methods:{
            updateAge(){
                this.myAge++;
                alert(this.myAge);
                console.log(this);
            }
        },
        //简单声明接收组件标签的参数
        //props:['name','sex','age']

        //接收的同时对数据的类型进行限制
        // props:{
        //     name:String,
        //     sex:String,
        //     age:Number
        // }

        //接收的同时对数据：类型进行限制+默认值的指定+必要性的限制
        props:{
            name:{
                type:String,//name的类型是字符串
                required:true//name是必要的
            },
            age:{
                type:Number,
                default:99//默认值
            },
            sex:{
                type:String,
                required:true
            }
        }
    }
script>

<style>
    .demo{
        background-color: skyblue;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

mixin混入

Vue.js 中的 mixin 是一种重用组件选项的机制，允许你在多个组件之间共享相同的选项。Mixin 可以包含任何组件选项，如数据、计算属性、方法等，然后将它们混合到其他组件中。这对于避免重复代码、提高代码重用性和维护性非常有用。

以下是如何使用 mixin 的基本示例：

创建一个 mixin 对象：

const myMixin = {
  data() {
    return {
      sharedData: 'This data is shared among components.'
    };
  },
  methods: {
    sharedMethod() {
      console.log('This method is shared among components.');
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12

在组件中使用 mixin：

Vue.component('my-component', {
  mixins: [myMixin],
  template: '
{{ sharedData }}
',
  created() {
    this.sharedMethod();
  }
});
1
2
3
4
5
6
7

在上面的示例中，我们创建了一个名为 myMixin 的 mixin 对象，其中包含了共享的数据和方法。然后，在 my-component 组件中使用了这个 mixin，通过 mixins 选项将 mixin 混合到组件中。

这样，my-component 组件就能够访问到 myMixin 中定义的 sharedData 数据和 sharedMethod 方法。这就实现了在多个组件中共享相同选项的效果。

需要注意以下几点：

• 如果 mixin 和组件本身具有相同的选项（例如，都有一个名为 data 的数据属性），则组件的选项将覆盖 mixin 的选项。
• mixin 可以被多个组件使用，这样可以实现多个组件之间的代码重用。
• mixin 可以按需引入，以满足不同组件的需要，从而提高代码的灵活性。
• 然而，需要小心使用 mixin，避免滥用它们，因为过多的 mixin可能会导致代码复杂性增加，难以维护。在实际使用中，根据具体需求和代码组织的合理性来决定是否使用 mixin。

App.vue

<template>
    <div>
        
        <Student>Student>
        <hr/>
        <School>School>
    div>
template>

<script>
    //导入Student组件
    import Student from './components/Student.vue';

    import School from './components/School.vue';

    export default {
        name:'App',
        //注册组件
        components:{
            Student,
            School
        }
    }
script>

<style>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

components/
mixin.js

export const mixin={
    methods:{
        showName(){
            alert(this.name);
        }
    },
    mounted() {
        console.log('你好啊！');   
    }
}

export const mixin2={
    data() {
        return {
            x:100,
            y:200
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Schools.vue

<template>
    <div class="demo2">
        <h2>学校名字:{{name}}h2>
        <h2>学校地址:{{address}}h2>
        <button @click="showName">点击显示学校名字button>
    div>
template>

<script>
    //局部引入一组混合
    //import {mixin,mixin2} from './mixin'
    export default {
        data() {
            return {
                name:'罗小黑',
                address:'湖南衡阳'
            }
        },
        //mixins:[mixin,mixin2]//局部混合配置项
    }
script>

<style>
    .demo2{
        background-color: orange;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Student.vue

<template>
    <div class="demo">
        <h2>学生姓名:{{name}}h2>
        <h2>年龄:{{age}}h2>
        <button @click="showName">点击显示学生姓名button>
    div>
template>

<script>
    //局部引入一组混合mixin
    //import {mixin,mixin2} from './mixin'

    //暴露组件
    export default {
        name: 'Student',
        data(){
            return{
                name:'张三',
                age:18
            }
        },
        //mixins:[mixin,mixin2]//局部混合配置项
    }
script>

<style>
    .demo{
        background-color: skyblue;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

main.js

//引入Vue组件
import Vue from 'vue';

//引入App组件
import App from './App.vue';

//全局引入一个混合(mixin)
import {mixin,mixin2} from './components/mixin'

//全局配置混合(mixin)
Vue.mixin(mixin);
Vue.mixin(mixin2);


//关闭Vue生产提示信息
Vue.config.productionTip=false;

//创建Vue实例对象nm
const vm = new Vue({
    el:'#app',
    render(h) {
        return h(App);
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24