Vue 组件总结笔记
一、 创建组件
1. 使用组件三部曲 ( 创建, 注册, 使用 )
2. 全局组件:Vue.component(‘tag‘, {});
3. 局部组件: components 属性进行注册
二、注册组件的方式
方式一:全局注册
// 可以在任何实例下使用Vue.component(‘my-component‘, { template: ‘#mycomponent‘, })
方式二:局部注册
// 局部注册,只能在 #app 下面使用 new Vue({ el: ‘#app‘, components: { ‘child-component‘: { template: ‘#child-component‘ } } })
三、 创建组件的标签
可以使用 template 或者 script 标签
四、定义组件时 data 和 el 必须使用函数
五、组件实例作用域是孤立的,不能在子组件内直接引用父组件的数据,可用使用 props 把数据传给子组件。
六、在父组件中使用子组件,通过以下语法将数据传递给子组件
<my-component v-bind:子组件props = "父组件属性"></my-component>
七、props 有三种绑定类型
1. 单项绑定: (vue 默认绑定) 修改父组件的数据会影响子组件数据,修改子组件数据不会影响父组件数据。
2. 双向绑定: sync 修改父组件影响子组件数据,修改子组件数据影响父组件。
3. 单次绑定: once 个人顾各人,父组件修改不影响子,子修改不影响父。
八、slot 内容插槽
时间: 2024-10-22 01:19:33