vue 组件开发
目录
组件认知
组件简单使用
项目结构:
Search.vue
HelloWorld.vue
App.vue 根组件
效果展示
data函数return的理解
通过 Prop 向子组件传递数据 子取父数据
理解:
简单使用:
父组件 App.vue
子组件 Search.vue
结果展示:
单向数据流
监听子组件事件 父取子数据
理解
简单使用
代码
结果:
父子组件的访问方式
父组件访问子组件 $refs 常用
理解
代码
展示效果
子组件访问父组件 $parent $root
理解
代码
结果
插槽
通过插槽分发内容
理解
简单使用 代码
具名插槽 渲染作用域 备用内容
具名插槽 渲染作用域 代码
备用内容 渲染作用域 代码
作用域插槽
理解
代码
组件之间跨级通信 Provide / Inject
理解
代码
非响应式
响应式
组件认知
一个应用会以一棵嵌套的组件树的形式来组织
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
层层划分 页由多组
组件是可复用的实例，所以它们与根实例接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等
组件简单使用
项目结构:
我们使用的组件是单文件组件(有一套完整的.vue内容 单独模块功能的封装)而不是字符串模板
Search.vue
你好呀 这个是搜索框 组件
HelloWorld.vue
{{ msg }}
Recommended IDE setup:
VS Code
+
Volar
Vite Documentation
|
Vue 3 Documentation
Edit
components/HelloWorld.vue to test hot module replacement.
App.vue 根组件
效果展示
data函数return的理解
你好呀 这个是搜索框 组件
{{msg}}
对比:
你好呀 这个是搜索框 组件
{{msg}}
通过 Prop 向子组件传递数据 子取父数据
理解:
简单使用:
父组件 App.vue
子组件 Search.vue
1.以字符串数组形式列出的 props
你好呀 这个是搜索框 组件
这个是静态的值 {{title}}
这个是动态的值 {{message}}
2. proos以对象的形式
你好呀 这个是搜索框 组件
这个是静态的值 {{title}}
这个是动态的值 {{message}}
结果展示:
警告:
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告
1.这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用
2.这个 prop 以一种原始的值传入且需要进行转换。
监听子组件事件 父取子数据
理解
简单使用
代码
Search.vue
App.vue
通过获取到子组件的值================{{msg}}
结果:
父子组件的访问方式
父组件访问子组件 $refs 常用
理解
代码
vue.app
search.vue
展示效果
子组件访问父组件 $parent $root
提示不太推荐使用 组件复用性高 这样使用会降低子组件的使用场景
理解
代码
$parent $root 用法相同 就展示一个使用方法
$parent
Search.vue
App.vue
结果
插槽
通过插槽分发内容
理解
简单使用 代码
App.vue
Search.vue
下面要使用插槽了
结果展示
具名插槽 渲染作用域 备用内容
具名插槽:
元素有一个特殊的 attribute：name。通过它可以为不同的插槽分配独立的 ID，也就能够以此来决定内容应该渲染到什么地方一个不带
name的出口会带有隐含的名字“default”
渲染作用域:
该插槽可以访问与模板其余部分相同的实例 property (即相同的“作用域”)。
官网 理解:父组件中用到的插槽中添加的内容 属于父组件 子组件使用不了
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
备用内容:
有时为一个插槽指定备用 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。
具名插槽 渲染作用域 代码
Search.vue
下面要使用插槽了
App.vue
{{msg}}
结果
备用内容 渲染作用域 代码
Search.vue
App.vue
{{msg}}
结果
作用域插槽
理解
父组件替换插槽的标签 但是数据由子组件来提供
代码
Search.vue
App.vue
{{sloProps}}
{{sloProps.msg}}
-
{{item}}
-
{{item}}
结果
组件之间跨级通信 Provide / Inject
无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个
provide选项来提供数据，子组件有一个inject选项来开始使用这些数据。
理解
代码
App.vue
Search.vue
非响应式
默认情况下，
provide/inject绑定并不是响应式的如果我们更改了
祖先组件的数据，这个变化并不会反映在 inject 的子组件property 中。
NavigationBar.vue
祖先组件========>{{message}}
Input.vue
子组件=====>{{msg}}
展示
点按钮前
点按钮后
响应式
NavigationBar.vue
祖先组件========>函数{{message}} 对象{{obj.msg}}
Input.vue
子组件=====>函数{{newMsg}} 对象{{obj.msg}}
结果
点按钮前
点按钮后
