Vue三大核心概念之一(属性)

1.自定义属性props:即组件中声明的属性,子类接受父类的值
2.原声属性attrs:没有声明的属性,默认自动挂在到组件根元素上,设置inheritAttrs为false能够关闭自动挂载
3.特殊属性class,style挂载到组件根元素上,支持字符串,对象,数组等多种语法.

定义属性的两种方式
1.props: [‘title’, ‘likes’, ‘isPublished’, ‘commentIds’, ‘author’] 无法对属性值进行校验
2.可以对属性值进行校验

  1. props: {
  2. // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
  3. propA: Number,
  4. // 多个可能的类型
  5. propB: [String, Number],
  6. // 必填的字符串
  7. propC: {
  8. type: String,
  9. required: true
  10. },
  11. // 带有默认值的数字
  12. propD: {
  13. type: Number,
  14. default: 100
  15. },
  16. // 带有默认值的对象
  17. propE: {
  18. type: Object,
  19. // 对象或数组默认值必须从一个工厂函数获取
  20. default: function () {
  21. return { message: 'hello' }
  22. }
  23. },
  24. // 自定义验证函数
  25. propF: {
  26. validator: function (value) {
  27. // 这个值必须匹配下列字符串中的一个
  28. return ['success', 'warning', 'danger'].indexOf(value) !== -1
  29. }
  30. }
  31. }

案例:

子组件

  1. <template>
  2. <div>
  3. name:{{name}}
  4. <br/>
  5. type:{{type}}
  6. <br/>
  7. list:{{list}}
  8. <br/>
  9. isView:{{isView}}
  10. <br/>
  11. <button @click="handClick">change</button>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. //子组件的名称
  17. name:"Props",
  18. props:{
  19. name:String,
  20. type:{
  21. validator:function(val){
  22. return ["入门","小站","Rumenz"].includes(val)
  23. }
  24. },
  25. list:{
  26. type:Array,
  27. default:()=>[]
  28. },
  29. isView:{
  30. type:Boolean,
  31. default:false
  32. },
  33. onChange:{
  34. type:Function,
  35. default:()=>{}
  36. }
  37. },
  38. methods:{
  39. handClick(){
  40. this.onChange(this.type==="入门"?"one":"tow")
  41. }
  42. }
  43. }
  44. </script>
  45. <style>
  46. </style>

父组件应用子组件

  1. <template>
  2. <div id="app">
  3. {{msg}}
  4. <!--属性绑定格式 :[自组件的属性]:[父组件的属性]-->
  5. <Props
  6. :name="name"
  7. :type="type"
  8. :list="list"
  9. :isView="view"
  10. :onChange="onChange"
  11. />
  12. </div>
  13. </template>
  14. <script>
  15. //导入子组件
  16. import Props from './components/Props'
  17. export default {
  18. name: 'App',
  19. data() {
  20. return {
  21. msg: "hello 入门小站",
  22. name:"name",
  23. type:"入门",
  24. list:['入门','小站'],
  25. view:true
  26. }
  27. },
  28. methods: {
  29. onChange(val){
  30. this.name=val;
  31. }
  32. },
  33. components: {
  34. Props //必须声明子组件
  35. }
  36. }
  37. </script>
  38. <style>
  39. #app {
  40. font-family: Avenir, Helvetica, Arial, sans-serif;
  41. -webkit-font-smoothing: antialiased;
  42. -moz-osx-font-smoothing: grayscale;
  43. text-align: center;
  44. color: #2c3e50;
  45. margin-top: 60px;
  46. }
  47. </style>

源码:https://github.com/mifunc/rumenz-vue/tree/master/rumenz-vue-three-core

返回笔记列表
入门小站