DDR爱好者之家

vue组件入门知识全梳理
站长资源 2024/12/25 佚名
53 1538
DDR爱好者之家 Design By 杰米

组件

vue组件入门知识全梳理

概念：template是入口组件，那么挂载在template下的组件是入口组件的子组件

局部组件

三步口诀：声子，挂子，用子

  • 声明一个局部组件，变量名首字母大写（为了和H5标签做区分），里面的内容和vue实例化对象的内容相似，但是不需要el，data必须是一个函数，函数返回一个对象
  • 把组件挂载到入口文件的components对象中。
  • 在入口文件的template中使用，可以是双闭合标签也可以是单闭合标签

全局组件

Vue.component(name,options)

第一个参数是组件的名称

第二个参数是组件的对象

注意全局组件要在创建Vue实例化对象前，否则会报错

vue组件入门知识全梳理

 // 全局组件(要在创建Vue实例之前)
 Vue.component('Vbtn', {
 template: `<button>全局按钮组件</button>`
 })
 // 1、创建一个入口组件
 // 2、创建头部组件，侧边栏组件和内容组件
 var Heard = {
 template: `
 <div>
 <h2>我是头部组件</h2>
 <Vbtn></Vbtn>
 </div>
 `
 }
 var Aside = {
 template: `
 <div>我是侧边栏组件</div>
 `
 }
 var Content = {
 template: `
 <div>我是内容组件</div>
 `
 }
 var App = {
 template: `
 <div class="main">
 <Heard class = "heaed"></Heard>
 <div class="main2">
 <Aside class="aside"></Aside>
 <Content  class="content"/>
 </div>
 </div>
 `,
 components: {
 Heard,
 Aside,
 Content
 }
 }
 new Vue({
 el: "#app",
 data() {
 return {
 msg: "这是测试"
 }
 },
 template: `
 <App></App>
 `,
 components: {
 App
 }
 });

组件深入

问：为什么要通过父亲获取数据，在传递到子组件呢？

答：通过父亲向后端获取数据，然后在分发到各组件可以减少后端的交互，不然各个组件都向后端发送请求影响性能

见下图：

vue组件入门知识全梳理

父子组件传值（父传子）

1、父 用子 时通过 绑定自定义属性 传递，

2、子要 声明 props:['属性']接收父绑定的自定义属性

3、收到就是自己的随便用

在template中直接使用 在js中this.属性名

vue组件入门知识全梳理

小补充：绑定自定义属性时：常量传递直接用，变量传递加冒号

总结父传子

父用子：先声子、挂子、用子

父传子：父传子（属性）、子声明（接收）、子使用

子传父

1、父 用子 绑定 自定义事件

2、子触发自定义事件：this.$emit()

第一个参数是**自定义事件名**
第二个参数是**传递进去的值**
![image](/img/bVbO3Ps)

全局组件的数据传递 1、通过VUE内置组件slot分发内容

原因：如果不使用slot无法修改全局组件的内容

作用：slot元素作为承载分发内容的出口

2、父子传值

自定义属性传递常量直接使用不需要加冒号

vue组件入门知识全梳理

如果要触发原生的事件需要通过 @原生事件名.native调用

vue组件入门知识全梳理

3、具名插槽

在子组件中声明使用vue的内置组件：

<slot name = "one"></slot>

父组件中调用

<h2 slot= "one"></h2>

这样做的目的：可以一条数据一个坑，数据不会乱了

附加功能

1、过滤器filters

1、作用:对当前数据添油加醋

2、语法：声明在组件内使用filters对象，返回一个函数，函数一定要有返回值

3、调用：template中调用过滤器：数据属性|过滤器名字

var Content = {
  template: `
   <div>
   <input type = number  v-model = "msg"/>
   <h2>{{msg|RmbData}}</h2>
   </div>
  `,
  data(){
   return{
   msg:10
   }
  },
  filters:{
   RmbData(value){
   return '$'+value
   }
  }
 }

生命周期

总结

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米