Vuejsファミリーバケツシリーズ(八)---コンポーネント
43370 ワード
概要
コンポーネントとは:コンポーネントはVueです.jsの最も強力な機能の一つです.
コンポーネントはHTML要素を拡張し、再利用可能なコードをカプセル化することができます.より高いレベルでは、コンポーネントはカスタム要素、Vueである.jsのコンパイラは特殊な機能を追加します.場合によっては、コンポーネントは、is特性で拡張されたオリジナルHTML要素の形式であってもよい.
コンポーネントの定義
方式一
コンポーネントコンストラクタを作成し、コンポーネントコンストラクタからコンポーネントを作成します.
方式2
直接コンポーネント(推奨)を作成するのは、実は方法の1つです.
質問:コンポーネント内のコードが多すぎると、構造が混乱して分かりにくくなります.解決:コードを抽出し、モジュールを形成します.
方式三参照テンプレート
コンポーネントの内容をテンプレート
コンポーネントとは:コンポーネントはVueです.jsの最も強力な機能の一つです.
コンポーネントはHTML要素を拡張し、再利用可能なコードをカプセル化することができます.より高いレベルでは、コンポーネントはカスタム要素、Vueである.jsのコンパイラは特殊な機能を追加します.場合によっては、コンポーネントは、is特性で拡張されたオリジナルHTML要素の形式であってもよい.
コンポーネントの定義
方式一
コンポーネントコンストラクタを作成し、コンポーネントコンストラクタからコンポーネントを作成します.
//1. Vue.extend()
var MyComponent=Vue.extend({
template:'Hello World
'
});
//2. Vue.component( , )，
Vue.component('hello',MyComponent);方式2
直接コンポーネント(推奨)を作成するのは、実は方法の1つです.
Vue.component('my-world',{
template:' ， '
});質問:コンポーネント内のコードが多すぎると、構造が混乱して分かりにくくなります.解決:コードを抽出し、モジュールを形成します.
方式三参照テンプレート
コンポーネントの内容をテンプレート
<html lang="en"> <head> <meta charset="UTF-8"> <title> title> <script src="js/vue.js">script> head> <body> <div id="itany"> <my-hello>my-hello> <my-hello>my-hello> div> <template id="wbs"> <div> <h3>{{msg}}h3> <ul> <li v-for="value in arr">{{value}}li> ul> div> template> <script> var vm=new Vue({ el:'#itany', components:{ 'my-hello':{ name:'panini', // ， ， template:'#wbs', data(){ return { msg:' ', arr:['tom','jack','mike'] } } } } }); script> body> html> ： ，
：
<html lang="en"> <head> <meta charset="UTF-8"> <title> title> <script src="js/vue.js">script> head> <body> <div id="itany"> <hello>hello> div> <template id="wbs"> <div> <h3>{{msg}}h3> <ul> <li v-for="value in arr">{{value}}li> ul> div> template> <script> var hello = { name:'panini', // ， ， template:'#wbs', data(){ return { msg:' ', arr:['tom','jack','mike'] } } }; var vm=new Vue({ el:'#itany', components:{ hello //es6 ： ， } }); script> body> html> ：
： css .css ， .vue
vue
， vue-cli ，
， ， 。
， vue
Vue.component('my-hello',{
template:'{{name}}
',
data:function(){ // ， ，
return {
name:'alice'
}
}
});
， vue
var vm=new Vue({
el:'#itany',
data:{
name:'tom'
},
components:{ //
'my-world':{
template:'{{age}}
',
data(){
return {
age:25
}
}
}
}
});
，
：
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<script src="js/vue.js">script>
head>
<body>
<div id="itany">
<button @click="flag='my-hello'"> hello button>
<button @click="flag='my-world'"> world button>
<div>
<keep-alive>
<component :is="flag">component>
keep-alive>
div>
div>
<script> var vm=new Vue({ el:'#itany', data:{ flag:'my-hello' }, components:{ 'my-hello':{ template:' hello ：{{x}}
', data(){ return { x:Math.random() } } }, 'my-world':{ template:' world ：{{y}}
', data(){ return { y:Math.random() } } } } }); script>
body>
html>keep-alive
keep-alive ， ， ，
，
， ，
var vm=new Vue({ //
el:'#itany',
components:{
'my-hello':{ //
data(){},
template:'#hello',
components:{
'my-world':{ //
data(){},
template:'#world',
}
}
}
}
});
a) ，
b) ， props ，
： props
a) vm.$emit( , ) ，
b) ， ，
： events ，
<html lang="en"> <head> <meta charset="UTF-8"> <title> title> <script src="js/vue.js">script> head> <body> <div id="itany"> <my-hello>my-hello> div> <template id="hello"> <div> <h3> hello h3> <h3> ：{{msg}},{{name}},{{age}},{{user.username}}h3> <h3> ：{{sex}},{{height}}h3> <hr> <my-world :message="msg" :name="name" :age="age" @e-world="getData">my-world> div> template> <template id="world"> <div> <h4> world h4> <h4> ：{{message}},{{name}},{{age}},{{user.username}}h4> <h4> ：{{sex}},{{height}}h4> <button @click="send"> button> div> template> <script> var vm=new Vue({ // el:'#itany', components:{ 'my-hello':{ // methods:{ getData(sex,height){ this.sex=sex; this.height=height; } }, data(){ return { msg:' ', name:'tom', age:23, user:{id:9527,username:' '}, sex:'', height:'' } }, template:'#hello', components:{ 'my-world':{ // data(){ return { sex:'male', height:180.5 } }, template:'#world', // props:['message','name','age','user'] // props:{ // ， ， 、 、 message:String, name:{ type:String, required:true }, age:{ type:Number, default:18, validator:function(value){ return value>=0; } }, user:{ type:Object, default:function(){ // return {id:3306,username:' '}; } } }, methods:{ send(){ // console.log(this); // this this.$emit('e-world',this.sex,this.height); // $emit() ， } } } } } } }); script> body> html>
props ， ， ，
。
？
， ，
<html lang="en"> <head> <meta charset="UTF-8"> <title> title> <script src="js/vue.js">script> head> <body> <div id="itany"> <h2> ：{{name}}h2> <input type="text" v-model="name"> <hr> <my-hello :name="name">my-hello> div> <template id="hello"> <div> <h3> ：{{name}}h3> <button @click="change"> button> div> template> <script> var vm=new Vue({ // el:'#itany', data:{ name:'tom', }, components:{ 'my-hello':{ // template:'#hello', props:['name'], data(){ return { username:this.name // } }, methods:{ change(){ this.username='alice'; // } } } } }); script> body> html> ，
,
.sync
1.0 ，2.0 ，2.3
<html lang="en"> <head> <meta charset="UTF-8"> <title> title> <script src="js/vue.js">script> head> <body> <div id="itany"> <h2> ：{{name}}h2> <input type="text" v-model="name"> <hr> <my-hello :name.sync="name">my-hello> div> <template id="hello"> <div> <h3> ：{{name}}h3> <button @click="change"> button> div> template> <script> var vm=new Vue({ // el:'#itany', data:{ name:'tom', }, components:{ 'my-hello':{ // template:'#hello', props:['name'], data(){ return { } }, methods:{ change(){ this.$emit('update:name','alice'); } } } } }); script> body> html> ：
： ，
： ， 。 （ C/C++ ）， ，
<html lang="en"> <head> <meta charset="UTF-8"> <title> title> <script src="js/vue.js">script> head> <body> <div id="itany"> <h2> ：{{user.name}}h2> <button @click="change"> button> <hr> <my-hello :user="user">my-hello> div> <template id="hello"> <div> <h3> ：{{user.name}}h3> <button @click="change"> button> div> template> <script> var vm=new Vue({ // el:'#itany', data:{ user:{ name:"panini", age:20 } }, methods:{ change(){ this.user.name = "panini"; } }, components:{ 'my-hello':{ // template:'#hello', props:['user'], data(){ return { } }, methods:{ change(){ this.user.name = "alice"; } } } } }); script> body> html> ： ，
：
C/C++ &
vue
， Vue （ ），
var Event=new Vue();
Event.$emit( , );
Event.$on( ,data => {}); <html lang="en"> <head> <meta charset="UTF-8"> <title> title> <script src="js/vue.js">script> head> <body> <div id="itany"> <my-a>my-a> <my-b>my-b> <my-c>my-c> div> <template id="a"> <div> <h3>A ：{{name}}h3> <button @click="send"> C button> div> template> <template id="b"> <div> <h3>B ：{{age}}h3> <button @click="send"> C button> div> template> <template id="c"> <div> <h3>C ：{{name}}，{{age}}h3> div> template> <script> // Vue var Event=new Vue(); var A={ template:'#a', data(){ return { name:'tom' } }, methods:{ send(){ Event.$emit('data-a',this.name); } } } var B={ template:'#b', data(){ return { age:20 } }, methods:{ send(){ Event.$emit('data-b',this.age); } } } var C={ template:'#c', data(){ return { name:'', age:'' } }, mounted(){ // Event.$on('data-a',name => { this.name=name; // console.log(this); }); Event.$on('data-b',age => { this.age=age; }); } } var vm=new Vue({ el:'#itany', components:{ 'my-a':A, 'my-b':B, 'my-c':C } }); script> body> html>vuex
，
に配置する