9.Vue组件内各属性的用法

239 阅读1分钟

1.主要来定义变量,数据 data

data( ) {       
     Return { 
          name:  ‘chenkeji’,
          List: [ 
              {id: 01, shop: ‘苹果’, price: 5},
              {id: 02, shop: ‘葡萄’, price: 6},
              {id: 03, shop: ‘草莓’, price: 15},
              {id: 04, shop: ‘芒果’, price: 8},
          ]
     }
 }

2.主要定义方法 methods

methods: {
      clickEvt( ) {
          Console.log( 123 )
      },
      getData( ) {
          Console.log( ’to do' )
      }
}

3.组件的引入 componens

注释: 这个组件是用于,在当前页面如果引入了其他组件,需要在这个方法里先注册 如果所注册的组件里有大写字母或数字,以-分开,并且改为小写,如 引入方法:import testNode from ‘./test’ 后面所跟上的地址是由你引入的组件位置而定

componens: {
    testNode

}

4.接收属性 props

props: {
    //在子组件哪可以接收父组件,由属性传输过来的值
    如:
    list: {
        required: true, //意思为必须传递这个参数
        type: Array,
        //当默认值为 Object/Array 的时候,必须使用工厂方法返回默认值
        default: ( ) => [ ] 
    } 
}

5.继承 extends

需要引入被继承的组件,然后把组件名卸载 extends 后面
这个属性只能继承一个组件,继承之后,可以使用该组件内的方法及数据
extends:组件名 
如: extends:parent,

6.混合 mixins

把多个配置文件混合在一起,类似于实现一个多继承
该属性接收的是一个数组
同单继承一样,需要引入被继承的组件,然后把那些被引入的组件名写在数组里
然后就可以调用这些被引入组件里的方法及数据
mixins: [
    parent,
    parent01
]

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题:github.com/xitu/juejin…

theme: juejin highlight: