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: '<p>{{ message }}</p>'
})

在上面的示例中，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: '<div>{{ sharedData }}</div>',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);}
});