点餐微信小程序_Vue 创建组件的两种方法小结(必

日期:2021-01-08 类型:行业动态 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

Vue 创建组件的两种方法小结(必看)       Vue 创建组件的方法有哪些呢?下面小编就为大家分享一篇Vue 创建组件的两种方法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

Vue.extend() 全局方法 生成构造器,创建子类

使用基础 Vue 构造器,创建一个“子类”。

这样写非常繁琐。于是vue进行了简化

id 是string类型,即是注册组件的名称

options 是个对象

// ponent1是标签名称
ponent('my-component1',{
 template: ' div This is ponent! /div '
var vm1 = new Vue({
 el: '#app1'

使用这种方式,Vue在背后会自动地调用Vue.extend()。

var vm2 = new Vue({
 el: '#app2',
 components: {
 // ponent2是标签名称
 'my-component2': {
 template: ' div This is ponent! /div '
 // ponent3是标签名称
 'my-component3': {
 template: ' div This is ponent! /div '
})

==局部注册都放在选项对象中创建==

ponents,里面可以定义多个组件。

简化后是这样的写法

 body 
 div id='box' 
 parent 
 /parent 
 /div 
 script src='js/vue.js' /script 
 script 
 ponent('parent',{
 template:` div h1 我是父组件 /h1 child /child /div `,
 components:{
 'child':{
 template:` h1 我是子组件 /h1 `
 new Vue({
 el:'#box'
 /script 
 /body 

注册一个parent的父组件。然后在父组件的选项对象中注册一个child的子组件。将子组件child的标签写到父组件parent的template里面。

页面上的样式结构就是

 div 
 h1 我是父组件 /h1 
 h1 我是子组件 /h1 
 /div 

注意:用局部注册的子组件不能单独直接使用!

标签挂在div里,会报错

 div id='box' 
 child /child 
 /div 

结果会报错。

以上这篇Vue 创建组件的两种方法小结(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。