一.传值
1.传值:string number boolean
- 建立了两个子组件Header.vue和Footer.vue,利用属性传值props在根组件App.vue中给两个子组件传输了title属性。
- 在Header.vue组件中,给h1标签(内容为title属性值)绑定点击事件,赋予点击即改变title内容的方法。
- 当点击Header.vue中的h1标签时,Header.vue中的title值改变了,但是Footer.vue中的title值未改变。
- 这是因为传的是值,一个组件触发更改这个值,并不会影响其他的组件值更改
点击前
点击后
二.传引用
1.传引用:array object
- 传引用与传值不同,一个组件对引用进行修改,其他引入了引用值的地方也会被修改
- 在根组件中复制两个users标签,并且都利用属性传值将users数组传给Users.vue组件中
- 在Users.vue组件中,创建按钮触发点击删除事件,一点击就删除数组的末尾值
- 点击后发现,页面中的两组users标签都同时履行了删除数组末尾的功能。
点击删除前
点击第一个删除后