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 }}

'
})

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

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

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

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

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

<template>
  <p>{{ message }}p>
template>
<script>
export default {
  props: ['message']
}
</script>

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

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

props: {
  message: String, // 数据类型为字符串
  count: {
    type: Number, // 数据类型为数字
    required: true // 必须传递
  }
}

在上面的示例中,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>

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>

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.');
    }
  }
};

在组件中使用 mixin:

Vue.component('my-component', {
  mixins: [myMixin],
  template: '
{{ sharedData }}
'
, created() { this.sharedMethod(); } });

在上面的示例中,我们创建了一个名为 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>

components/
mixin.js

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

export const mixin2={
    data() {
        return {
            x:100,
            y:200
        }
    }
}

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>

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>

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);
    }
});

你可能感兴趣的:(#,Vue学习,vue.js,学习,flutter)