今天仍然就是敲vue的一个demo，vue的props配置项和mixin混入
props配置项
Vue.js 中的 props 是用于在父组件向子组件传递数据的配置项。通过 props，你可以将父组件中的数据传递给子组件，并在子组件中使用这些数据。以下是关于 props 配置项的一些重要信息：
父组件向子组件传递数据： 通过在子组件的 props 中声明属性，可以告诉Vue.js你希望从父组件传递哪些数据到子组件。这些属性可以是父组件中的任何数据。
props 声明： 在子组件中，你需要使用 props 选项来声明接收哪些属性。这通常在子组件的选项中进行定义。例如：
js
Vue.component('child-component', {
props: ['message'],
template: '<p>{{ message }}</p>'
})在上面的示例中，props 数组中的 'message' 属性告诉子组件可以接收名为 'message' 的属性。
传递数据： 在父组件中，通过将数据绑定到子组件的属性来传递数据。例如：
bash
<child-component :message="parentMessage"></child-component>这里 parentMessage 是父组件中的数据，它通过 :message 绑定到子组件的 message 属性。
子组件中使用 props 数据： 在子组件的模板中，你可以像使用本地数据一样使用 props 数据。例如：
html
<template>
<p>{{ message }}</p>
</template>
js
<script>
export default {
props: ['message']
}
</script>子组件通过 this.message 来访问传递过来的属性数据。
props 类型和验证： 你可以为 props 指定类型和验证规则，以确保传递的数据符合预期。例如：
js
props: {
message: String, // 数据类型为字符串
count: {
type: Number, // 数据类型为数字
required: true // 必须传递
}
}在上面的示例中，message 必须是字符串类型，而 count 必须是数字类型且必须传递。
通过使用 props，你可以有效地实现父子组件之间的数据传递和通信，使你的Vue.js应用程序更加模块化和可维护。
App.vue
html
<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
html
<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 对象：
js
const myMixin = {
data() {
return {
sharedData: 'This data is shared among components.'
};
},
methods: {
sharedMethod() {
console.log('This method is shared among components.');
}
}
};在组件中使用 mixin：
js
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
html
<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
js
export const mixin={
methods:{
showName(){
alert(this.name);
}
},
mounted() {
console.log('你好啊！');
}
}
export const mixin2={
data() {
return {
x:100,
y:200
}
}
}Schools.vue
html
<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
html
<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
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);
}
});