Vue中的 ref,props,mixin属性

//引入Vue
import Vue from 'vue';
//引入App
import App from './App';
//关闭vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
    el: "#app",
    render: h => h(App)
})

<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "三里屯小学",
      address: "北京"
    }
  }
}
</script>

<style scoped>
.school {
  background-color: aliceblue;
}
</style>

<template>
  <div>
    <h2 ref="title">欢迎学习Vue</h2>
    <button @click="showDom" ref="btn">点我输出上方dom</button>
    <School ref="sch"/>
  </div>
</template>

<script>
//引入School组件
import School from "@/components/School";

export default {
  name: "App",
  components: {
    School
  },
  methods:{
    showDom(){
      console.log(this.$refs);
      console.log(this.$refs.title);//真实Dom元素
      console.log(this.$refs.sch);//School组件的实例对象
    }
  }
}
</script>

<style scoped>
</style>

props: [ 'name']

props:{
	name : Number
}

props:{
	name:{
		type:String,//类型
		required:true,//必要性
		default:'老王'//默认值
	}
}

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg:"学生信息",
    }
  },
  //简单声明接受
  props:["name", "sex", "age"]
}
</script>

<style scoped>
</style>

<template>
  <div>
    <Student name="张三" sex="男" :age="18+1"/>
    <Student name="王老五" sex="男" age="19"/>
  </div>
</template>

<script>
//引入School组件
import Student from "@/components/Student";

export default {
  name: "App",
  components: {
    Student
  }
}
</script>
<style scoped>
</style>

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

<Student name="张三" sex="男" :age="18"/>

//接收的同时对数据：类型限制+默认值指定+必要性限制
  props: {
    name: {
      type: String,//类型String
      required: true//必须传值
    },
    age: {
      type: Number,
      default: 99//默认99
    },
    sex: {
      type: String,
      required: true
    }

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ myAge }}</h2>
    <button @click="updateAge">点我修改传进来的年龄</button>
  </div>
</template>
<script>
export default {
  name: "Student",
  props: ["name", "sex", "age"],
  data() {
    return {
      msg: "学生信息",
      myAge: this.age
    }
  },
  methods: {
    updateAge() {
      console.log(this.myAge++);
    }
  }
}
</script>
<style scoped>
</style>

<template>
  <div>
    <Demo msg="hello"/>
  </div>
</template>
<script>
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>

<template>
  <div>
    {{ msg }}
  </div>
</template>
<script>
export default {
  name: "Demo",
  props: ["msg"],
  mounted() {
    console.log(this);
  }
}
</script>

<template>
  <div>
    {{ $attrs.msg }}
  </div>
</template>
<script>
export default {
  name: "Demo",

  mounted() {
    console.log(this);
  }
}
</script>

{
	data(){....},
	methods:{....}
}

<template>
  <div>
    <h2 @click="alertName">学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>{{ x }}</h2>
    <h2>{{ y }}</h2>
  </div>
</template>
<script>
//引入混合
import {mixin,mixin2} from "@/mixin";
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
      x:300
    }
  },
  mounted() {
    console.log("hello mounted");
  },
  mixins: [mixin,mixin2]
}
</script>
<style scoped>
</style>

<template>
  <div>
    <h2 @click="alertName">学校名称：{{ name }}</h2>
    <h2>学生地址：{{ address }}</h2>
  </div>
</template>
<script>
import {mixin} from "@/mixin";
export default {
  name: "School",
  data() {
    return {
      name: "三里屯大学",
      address: "北京"
    }
  },
  mixins: [mixin]
}
</script>
<style scoped>
</style>

<template>
  <div>
    <Student/>
    <hr/>
    <School/>
  </div>
</template>
<script>
//引入School组件
import Student from "@/components/Student";
import School from "@/components/School";
export default {
  name: "App",
  components: {
    Student,
    School
  }
}
</script>
<style scoped>
</style>

export const mixin = {
    methods: {
        alertName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log("你好，mounted");
    }
}

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

//引入Vue
import Vue from 'vue';
//引入App
import App from './App';
import {mixin,mixin2} from "@/mixin";
//关闭vue的生产提示
Vue.config.productionTip = false
Vue.mixin(mixin)
Vue.mixin(mixin2)
//创建vm
new Vue({
    el: "#app",
    render: h => h(App)
})