vue 元件的建立與傳值

一、元件的建立

區域性元件

1.建立乙個檔案，建立子元件

2.在主元件script標籤內直接引入[
import 自定義元件名 from
"子元件路徑"
]import toptitle from
"./component/systemtoptitle"
;3.註冊元件 將子元件掛載在主元件上  在export
default中 component屬性中註冊 
//註冊方式一：
components:
//註冊方式二：
components:
4.註冊完成過後，使用元件
//註冊方式一使用：
<
/v-toptitle>
//註冊方式二使用：
<
/toptitle>

1.建立乙個檔案，建立元件

2.在main.js中引入該元件  import 自定義元件名 from
"元件檔案路徑"
import gettime from
"./component/child/gettime"
3.註冊  vue.
component
("自定義標籤名"
,引入時定義的元件變數名)
;  vue.
component
("v-times"
,gettime)
;//若沒有單獨定義全域性元件檔案時，則跳過上述步驟，直接寫為
vue.
component
("v-times",}
",//元件模板
data()
}});
4.使用
<
/v-times>

子元件定義props屬性 接收父元件傳遞的值

1.方法一：這種方法對傳遞的資料型別沒有要求

props:
["logoimage"
,"sysname"];
2.方法二：約束資料型別的方法
props:
,3. 方法三：約束資料型別及預設值 如果父元件沒有傳遞資料 走預設值  傳遞資料 走傳遞的值
props:
,"sysname":,
"parentinfo"
:object,
}

//子元件

"logo"
>
//這個案例中 子元件的logoimage  sysname由父元件傳遞而得 
="logoimg"
:src=
"logoimage" alt=
"">
//動態繫結路徑
="logoname"
>
}<
/span>
<
/div>
<
/template>
export
default
,"sysname":,
"parentinfo"
:object,}}
<
/script>
//父元件
"title"
>
<
!-- v-logo中的 屬性名稱 應與子元件中的 props[
] 中的屬性名稱保持一致--
>
"logo"
:sysname=
"name"
>
<
/v-logo>
<
/div>
<
/template>
import logo from
"./child/logo"
;//引入子元件
export
default
,data()
}<
/script>非父子元件傳值 ：$emit $on
<

!--為實現非父子元件的值傳達 需要new乙個物件--

>

vue.prototype.emitevent =

newvue()

;

1.元件1傳遞資料

this
.emitevent.
$emit
("go-event",)
2.元件2接收資料
this
.emitevent.
$on(
"go-event"
,function
(result)
)

// 方法一：通過父元件給子元件屬性值實現 

1.子元件中props中定義：
props:
2.父元件中使用子元件時屬性parentinfo賦值為this
,this指當前父元件
"this"
>
3.在子元件中輸出
console.
log(
this
.parentinfo)
;//獲得整個父元件
//方法二：在子元件中使用this.$parent獲取
let parentdata=
this
.$parent;
//獲取到當前子元件的父元件、

1.在父元件中子元件的標籤上新增ref屬性  

"logolist"
>
<
/v-logo>
//logolist自定義名稱
2.獲取：this
.$refs
let logoinfo=
this
.$refs.logolist;
//獲取到的是整個logo子元件

vue變數傳值 vue元件與元件之間傳值

如上圖所示，2是1的子元件，1是3的父元件，2和3是兄弟元件 html 子元件註冊 vue.component list group 父元件 new vue 綜上所述，父元件向子元件傳值需要三步 1 首先在父元件中建立資料 2 然後再html 中用 繫結資料 3 最後在子元件註冊的 中用props接...

Vue元件的建立和傳值

建立元件的3種方法 第一種 vue.extend 函式返回乙個元件的構造器,裡面包含乙個引數,引數是物件,物件裡面是一些配置項 vue.component 函式利用vue.extend 返回的構造器建立乙個元件的例項,有兩個引數.引數1 元件名字,引數2 元件構造器 注意 模板template中只能...

vue 建立元件 模板 動態元件 傳值

lesson10 1.demo vue樣本 3.模板 template 1 template 有且只能有乙個根元素。2 將你要掛載的元素進行替換操作。3 模板當中可以使用指令，data,methods等等都可以使用 注意 當你實現化vue例項時，他會看是否有模板，如果有會將你掛載的元素替換。如果沒有...