一 ,项目创建
1下载脚手架(4版本的脚手架)
npm i @vue/cli@4 -g
2创建项目
vue create 项目名
3运行
npm run serve
二,组件传值
1父子组件传值
(1)父组件使用自定义属性,对子组件进行传值。
(2)父组件 在引用的子组件标签里 创建自定义属性 属性值为传递的值
(3)子组件通过props选项进行接收值
2子组件对父组件传值
(1)通过自定义事件进行传值
(2)子组件通过this.$emit('事件名','传递参数')
(3)父组件通过 @事件名='触发函数' 函数的参数就是 子组件传递的参数
3组件之间传递
(1)通过创建事件中心。传递和接收都引入这个事件中心。从而达到传递。
(2)传递者通过事件中心暴露出来的vue实例挂载上自定义事件vm,$emit('事件名字','传递参数')
(3)接受者在生命周期为created()时监听获取值vm.$on('事件名字',da=>{da就是监听到的参数})
三,插槽
1匿名插槽
应用场景组建中只有一个差异的地方
子组件(公共组件)需要的地方加入<slot></slot>标签即可
父组件(应用公共组件)引入子组件 并且注册在componets(组件嵌套) 在页面中直接使用引入时的别名 作为标签使用。添加公共组建中 不同的元素。
2具名插槽
应用场景 组件中有多个差异的地方
同上类似 只不过slot 标签需要加name属性,属性值为名字
调用时 和上面一样 不同的是 引用的标签里 需要加 template标签 v-slot:加名字 就完成了 绑定
v-slot:还可以简写 直接#加名字
3作用域插槽
应用于 子组件需要给父组件传值的时候
子组件 通过自定义属性传递 :row="数据"
父组件 通过
v-slot="数据"接收 或者
slot-scope="attr"
四ref
在标签中加入 ref=‘xxx’
调用时this.$refs.xxx就获取到dom元素了