每日一VUE——组件基础-组件间传递数据

时间：2024-04-16 17:43:59

props

在子组件中添加props选项，表示从父组件接受参数

<body>
  <div id="app">
    <!-- 使用Greeting组件 -->
    <greeting name="Alice" message="Hello"></greeting>

    <!-- 使用WeatherDisplay组件 -->
    <weather-display
      :temperature="25"
      :weather-condition="'Sunny'"
      :location="'Beijing'"
    />
  </div>

  <script>
    Vue.component('Greeting', {
      template: '<div class="greeting"><span>{{ message }}, {{ name }}!</span></div>',
      props: {
        name: String,
        message: String
      }
    });

    Vue.component('WeatherDisplay', {
      template: '<div class="weather-display">' +
        '<h2>当前天气</h2>' +
        '<p>温度: {{ temperature }}°C</p>' +
        '<p>天气: {{ weatherCondition }}</p>' +
        '<p>地点: {{ location }}</p>' +
      '</div>',
      props: {
        temperature: Number,
        weatherCondition: String,
        location: String
      }
    });

    new Vue({
      el: '#app'
    });
  </script>
</body>

props表示从上到下的数据流传递，即父组件的数据变化会向下引发传递到子组件的数据更新，反之不行。

/这就意味着不应该在子组件内部修改props选型中的属性值

props的验证

  1. 数据类型验证
props：{
	age:[String, Number, Boolean]
}
  1. 必填值验证
props：{
	age:{
		type: String,
		required: true
	}
}
  1. 默认值验证
props：{
	age:{
		type: String,
		default: 20
	}
}

如果数据类型为数组或者对象数据类型的数据，声明default时要使用函数返回

props：{
	people:{
		type: object,
		default: function(){
			return{
				name:...,
				age:...,
				message:...
			}
		}
	}
}
  1. 自定义验证
props：{
	age:{
		vaildator(value) {
			return value >=0 && value<=100
		}
	}
}

相关文章