Vue组件学习

1、开头说一下注册的组件的方法是:

!!!在这边的开头要注意一下组件书写的时候都是要加上div的,这样在渲染的时候才会把template里面所有的HTML语句都显示出来。

这里的注册的全局组件是:

  • 这里的tagName意思是定义的组件的名称,命名的方式是:字母全部都是小写的形式,而且包含一个“-”的符号
  • options是放进去的组件的选项对象,这里的组件是可以复用的对象 
Vue.component(tagName,options)

这里还有一种方法来注册:

这里可以直接将组件的对象用{}括起来之后直接放到里面

  •  这里组件注册的时候的data参数中必须是函数:就像下面的一样
  • 这里使用函数的作用是对每个example中的组件都是各自独立的,各个组件对于count的调用都是独立的(这里的感觉就像是内存地址是不一样的,但是方法都是一样的)

2、注册局部组件

  • 这里要注意的是局部组件只能在父组件中使用,意思就是只会出现在引用了他的父组件中
  • 这里就是层层套用的感觉

 3、数据传递

  • 这里是父组件使用的,这里的使用的过程是使用props的参数来接收
  • 这里props还有命名方式的规定,我这里就不管了我习惯全部小写的形式
  • 还有这里的数据传递使用的是v-bind的绑定,吧父组件里的data数据传给子组件

这里举的例子是子组件和父组件的多层的嵌套的使用例子:

  • 这里的就是通过在app的div中创建的一个最高级别的父组件,之后通过props的引用和下面的子与子的组件的传递下给了chiledcomponent这个最小的组件。
  • 这里我使用了两种方式来进行传参:有引用根实例的name参数,还有直接是根组件的message的属性直接传参。
 另外还有props的传参要点就是:1、可以是数组。2、可以是对象。
###这里是数组的传参

 这里的是两者结合的代码:

  • 这里结合之后的代码中使用的是对象的方式传进来的,这里对象的方式传进来的话就只要在props中放入对象中的属性就可以了

你可能感兴趣的:(vue,vue.js,javascript,前端)