vue—father and son

vue子父组件传值
移动端自适应meta name=“viewport” content=“width=device-width”
新建public/css/index.css
在index.html引入该css文件
新建src/components/header.vue
id name =h-header
在App.vue引入该文件
import header from ‘./co’
export下创建
componente:{
v-header
}
声明props
props:[’ ']
父组件给子组件传值 进入header.vue
在子组件中在export下写
props:[‘title’]//不限制数据类型
或者props:{
‘title’:string//限制了数据类型
}

在App.vue的 v-header标签中写
v-header ：title=“title”
在export的data下return中添加 title:?
父组件拿到子组件的属性
App.vue export下添加 mounted{}
在子组件中添加methods 添加getheader方法
父组件 v-header ref=“header”
mounted下let header=this.$refs.header;
header.getheader(),
通过ref获取子组件的整个对象
console.log(header);
console.log(header.title);
data return 中有title的值

子组件主动获取父组件的属性和方法
header.vue子组件

mounted{
console.log(this.$parents)//拿到父容器
let app=this.$parents;
}

app.vue 添加methods方法

子组件


父组件的修改


子组件给父容器传递数据 获取整个父元素对象

vue非父组件之间的传值
新建components/footer.vue 修改id和name
App.vue中import 引入标签
让header 与footer之间进行传值
非父组件之间的传值 使用事件车 广播 $emit $on
创建广播文件
新建src/emit/emit.js
import Vue from 'vue’导入vue
let vue=new Vue();//new之后这个vue里没有东西 用来事件广播
export default vue;//暴露
进入header



footer

footer.vue给header.vue发送数据

给footer添加methods方法

header