Vue元件化(全域性、區域性)、props傳參
阿新 • • 發佈：2018-12-11
目錄
全域性元件化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script> </head> <body> <!-- 第一種寫法 --> <div id="box"><quanju></quanju></div> <!-- 第二種寫法,寫在網頁端 --> <div id="div1"><seccc></seccc></div> <!-- 第二種寫法,自定義內容(第二種推薦寫法) --> <template id="tt3"><h1 @click="fn1()">自定義標籤的第二種寫法</h1><span></span></template> <script type="text/javascript"> //全域性元件化，格式： component(自定義標籤名,標籤和內容，但需要注意，根只有一個) //錯誤示範： template:"<div></div><div></div>" 必須只有一個大的範圍包圍，不能並行 //第一種寫法,可讀性極差 Vue.component("quanju",{template:"<h1>hello world </h1>"}); var vm=new Vue({ el:"#box" }); //第二種寫法，推薦 Vue.component("seccc", { template:"#tt3", //也可以設定屬性,但只能在組塊內使用 data:function(){ return {mes:"吳師傅",age:18} }, methods:{ fn1(){ console.log("也可以有方法的哦"); } } }) var tm=new Vue({ el:"#div1" }); </script> </body> </html>`
帶引數傳遞的全域性元件化(props方式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.0/axios.js"></script> </head> <body> <div id="box"> <!-- 由於下面定義的標籤名有大寫，所以只能寫成這樣 --> <my-con message="吳師傅" age="18"></my-con> <my-con message="李師傅" age="18"></my-con> <my-con message="陳師傅" age="18"></my-con> </div> <!-- 自定義元件內容,直接在template內寫{{}}是沒用的，必須要用div或者其他網頁元素包裹！ --> <template id="tt"><div> {{message}} {{age}} {{canshu}}</div></template> <script type="text/javascript"> //全域性元件化帶引數 Vue.component("myCon",{ //props方式傳參 props:["message","age"], //用標準格式寫組建(在html裡面定義,對應網頁標籤的template的id) template:"#tt", data:function(){ return {canshu:"這是data裡面的引數,不是傳參的哦！"} } }); var vm=new Vue({ el:"#box" }); </script> </body> </html>
區域性元件化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script> </head> <body> <div id="box"><text1></text1><text2></text2></div> <template id="myText"><h1 @click="fn2()">{{msg}}{{age}}</h1></template> <script type="text/javascript"> var vm=new Vue({ el:"#box", data:{}, //區域性元件化寫法 components:{ //第一種寫法:在template裡面直接輸入內容 "text1":{ //注意：在組建裡面的data和methods只能在組建內容裡面使用,不能在外面引用 template:`<div><h1 @click="fn1()">直接寫在template裡面</h1>{{msg}}{{19}}</div>`, //自定義元件裡面也有自己的方法和屬性 data:function(){ return{msg:"吳師傅",age:19} }, methods:{ fn1:function(){ console.log("區域性組建裡面的方法"); } } },//text1 //第二種寫法(推薦用這種，客觀性強) "text2":{ template:"#myText", //元件裡面的data寫法比較怪異 data:function(){ return {msg:"吳師傅哈哈",age:30} }, methods:{ fn2:function(){ console.log("第二種寫法的方法"); } } } }//components }); </script> </body> </html>
帶引數傳遞的區域性元件化(props方式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
</head>
<body>
<div id="box">
<!-- 這樣引用方法是無效的,元件內的觸發方法只能在元件模板內使用,在網頁上此標籤會被翻譯模板內的內容 -->
<biao-qian name="吳師傅" age="18" @click="fn2()"></biao-qian>
</div>
<!-- 自定義元件以及元件內的內容，切記一定要用網頁元素包裹起來！！！！方法和引數只能用區域性的,不能使用Vue的 -->
<template id="tt"><div @click="fn1()">{{"引數的名字是:"+name}}{{"傳參的年齡是:"+age}}</div></template>
<script type="text/javascript">
//區域性元件化
var vm=new Vue({
el:"#box",
data:{},
methods:{
fn2(){
console.log("Vue內的方法");
}
},
components:{
//定義一個名biaoQian的網頁標籤
"biaoQian":{
//傳參的引數名,引數名必須用雙引號包裹,並且引數名不建議用關鍵字如name class等
props:["name","age"],
template:"#tt",
//區域性元件內的自定義引數
data:{},
//區域性元件內的方法
methods:{
fn1(){
console.log("區域性元件內的引數只能在區域性元件內使用哦")
}
}
}
}
});
</script>
</body>
</html>自定義元件使用注意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
</head>
<body>
<!-- 連續兩個大寫字母,都要在前面加"-"再小寫 -->
<div id="box"><te-t-td></te-t-td></div>
<!-- Vue和組建都有一個mes,在模板裡都是用區域性的mes，不會用vue的 -->
<template id="myte"><div><h1 @click="fn1()">{{msg}}</h1></div></template>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{msg:"李師傅"},
components:{
"teTTd":{
template:"#myte",
data:function(){
return {msg:"吳師傅",age:18}
},
methods:{
fn1(){
console.log("有大寫的自定義標籤,全部都換成小寫，並在大寫字母前新增-")
}
}
}
}
});
</script>
</body>
</html>