<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用prop属性向子组件传递数据</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<blog-content date-title="庭院深深几许,云窗雾阁春迟"></blog-content>
<blog-content v-bind:date-title="content"></blog-content>
</div>
<script>
//创建一个应用程序实例;
const vm = Vue.createApp({
data() {
return {
content: '玉瘦檀轻无限恨,南楼羌管休吹'
}
}
});
//设置组件
vm.component('blog-content', {
props: ['dateTitle'],
//date-title就像data定义的数据属性一样;
template: '<h3>{{dateTitle}}</h3>',
//在该组件可以使用"this.dateTitle"这种形式调用prop属性;
created() {
console.log(this.dateTitle);
}
});
//在指定的DOM元素上装载应用程序实例的根组件;
vm.mount('#app');
</script>
</body>
</html>
1、父子组件间的通信
- 子组件不应该直接向服务器请求数据
- 顶层组件请求数据之后,再向子组件传递数据(通信)
- 父向子:通过props(属性)父组件向子组件传递数据
- 子向父:通过事件子组件向父组件发送消息
2、props基本用法
- 1、在顶层vue实例中(父组件)创建需要用于传递的数据,并注册一个子组件cpn3、props值的两种方式
- props值有两组方式,
- 方式1:字符串数组,数组中的元素就是传递的值就是传递时的名称方式2:对象,对象可以设置传递时的类型,也可以设置默认值
当需要对props进行类型等验证时,就需要对象写法了
支持验证的类型包含:
string
number
boolean
array
object
date
function
symbol
4、props驼峰标识写法
- props不要写驼峰对象名
5、子组件向父组件传值
- 使用$emit()来传值,第一个参数是自定义事件名,第二个参数是发射出去的信息,传给父组件的监听函数
6、子组件内部双向数据绑定
- 1、子组件内要创建data进行绑定
2、子组件内要创建data进行绑定
在子组件中进行v-model双向绑定,不要在父组件中进行双向数据绑定