目次
$refs 親コンポーネントは子コンポーネント データを取得します。
$parent サブコンポーネントは、親コンポーネントのデータを取得します。
公式 Web サイトのアドレス:コンポーネントの登録 - Vue.js (vuejs.org)
コンポーネント:
コンポーネントはモジュール単位として単純に理解でき、Vueコンポーネントによりコードの再利用性が向上します。コンポーネントを使用すると、頻繁に変化する要件の問題を解決できます
将来的には、各コンポーネントは個別のファイルになり、最終的な実行はページ上に配置されるようになります。
コンポーネントには、宣言、登録、および使用の 3 つのステップがあります。ただし、グローバル コンポーネントは宣言時にすでに登録されているため、グローバル コンポーネントは除きます。
グローバルコンポーネント:
さまざまなスコープで使用できるコンポーネントを指します。
コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<hello></hello><!--使用-->
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
//声明加注册
Vue.component("hello",{
template:`<div>hello，{
{name}}</div>`,
data(){//这边也是可以加data以及其他的各种主属性
return{
name:"我是hello"
}
},
})
let app=new Vue({
el:"#app"
})
</script>
</html>ブラウザの結果:
HTML ページでテンプレートを宣言します。
もちろん、ローカル コンポーネントは HTML ページ上でテンプレートを宣言することもできます。これはグローバル コンポーネントと同じです。
コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<hello></hello><!--使用-->
</div>
<template id="myhello">
<div>hello，{
{name}}</div>
</template>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
//声明加注册
Vue.component("hello",{
template:"#myhello",//通过id选择器选择上面的id
data(){
return{
name:"我是hello"
}
},
})
let app=new Vue({
el:"#app"
})
</script>
</html>効果は最初のものと同じなので、デモは行いません。この方法には HTML ページを記述するときにプロンプトがあり、js があまり乱雑になりません。どちらの方法でも問題ありません。どちらを使用しても構いません。のように。
ローカルコンポーネント:
コンポーネントが定義されているスコープ内でのみ使用できるコンポーネントを指します。
ローカルコンポーネントの最初の方法:
今回は宣言と登録を一緒に行う方法ですが、この方法は非推奨、再利用性が弱く、JSコードが多すぎて閲覧に不便です
コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<baibai></baibai><!--使用-->
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
let app=new Vue({
el:"#app",
components:{
baibai:{//声明加注册
template:`<div>拜拜{
{name}}</div>`,
data() {//data是在局部组件baibai里面
return {
name:"小明"
}
},
},
},
})
</script>
</html>ブラウザの結果:
ローカルコンポーネントの 2 番目の方法:
今回は宣言と登録を分けて使用していますが、現在主流となっている再利用性が高く、簡潔でわかりやすい方法です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<baibai></baibai><!--使用-->
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
var baibai={//声明
template:`<div>拜拜{
{name}}</div>`,
data() {
return {
name:"小明"
}
}
}
let app=new Vue({
el:"#app",
components:{
baibai//注册
},
})
</script>
</html>私は上記の登録の略語を使用しましたが、以下は完全な登録です。基本的にこれを完全に書く人はいません。
しかし、他の人のコード記述を見ると、それを理解できなければなりません
let app=new Vue({
el:"#app",
components:{
baibai:baibai//注册
},
})スロットスロット:
スロット (slot ) の目的は、コンポーネントの拡張性を高めることであり、親コンポーネントのコンテンツと子コンポーネント自体のテンプレートを混合するために使用されます。
たとえば、 ゲーム内の武器には宝石を埋め込むことができますが、宝石を挿入するにはスロットが必要です。
匿名スロット:
匿名スロットとは文字通り名前のないスロットを意味し、任意のコンテンツを配置できるのが特徴です。
複数のスロットがある場合、匿名スロット ページを使用すると、複数のコンテンツが含まれます。
コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<baibai>
<div>我是插槽的内容</div><!--组件中间的内容-->
</baibai><!--使用-->
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
var baibai={//声明
template:`<div>
<slot></slot>
拜拜{
{name}}
<slot></slot>
</div>`,
data() {
return {
name:"小明"
}
}
}
let app=new Vue({
el:"#app",
components:{
baibai//注册
},
})
</script>
</html>ブラウザの結果:
2 つのスロットが書き込まれているため、Web ページには 2 つのコンテンツが出力されます。
名前付きスロット:
名前付きスロットは特別な属性名を使用して配布コンテンツを構成でき、複数の名前付きスロットには異なる名前を付けることができます。
名前付き関数には、HTML コード内で 3 つの実装方法がリストされています。ニンジンとキャベツにはそれぞれ好みの方法があり、どれが適しているか
コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<baibai>
<!--第一种方式-->
<div slot="tou">头部内容，旧语法，据说2.6.0后废弃，但是我2.7.0还能使用</div>
<!--第二种方式-->
<template #shenti>
<div>
身体内容，新语法，缩写
</div>
</template>
<!--第三种方式-->
<template v-slot:jiao>
脚部内容，新语法
</template>
</baibai><!--使用-->
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
var baibai={//声明
template:`<div>
<slot name="tou"></slot>
<slot name="shenti"></slot>
<div>拜拜{
{name}}<div>
<slot name="jiao"></slot>
</div>`,
data() {
return {
name:"小明"
}
}
}
let app=new Vue({
el:"#app",
components:{
baibai//注册
},
})
</script>
</html>ブラウザの結果:
親子コンポーネントの通信:
親から子への値の受け渡しもVueでは非常に重要な操作であり、うまく活用するとコードが書きやすくなります。
単純かつ失礼な $refs と $parent:
これら 2 つのプロパティの機能は、子コンポーネント インスタンスと親コンポーネント インスタンスの配列を取得することです。
インスタンスを使用すると、コンポーネントのプロパティとメソッドを簡単に操作できます。
$refs 親コンポーネントは子コンポーネント データを取得します。
$refs を使用するには、ref 属性を通じて子要素で独自の参照名を宣言する必要があります。
書き込み：
<dawa ref="dawa"></dawa><!--子类的组件；ref声明的名称父组件中要通过它来获取数据-->次の例では、ボタン バインディング クリック イベントを親コンポーネントに書き込み、子コンポーネントの年齢データを操作して 1 つを追加します。
コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
你好，{
{name}}
<dawa ref="dawa"></dawa><!--里面ref属性不写的话就传不了值-->
<button type="button" @click="AgeFun">子类年龄+1</button><!--在父类里面写的按钮-->
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
var dawa={
template:`
<div>
子组件----{
{childName}}--{
{age}}
</div>
`,
data() {
return {
childName:"大娃",
age:18,
}
},
}
let app=new Vue({
el:"#app",
data() {
return {
name:"父类"
}
},
methods: {
AgeFun(){
//拿到子组件的age值并且+1
this.$refs.dawa.age=this.$refs.dawa.age+1
}
},
components:{
dawa
},
})
</script>
</html>以下の結果は、2 回クリックしたときに得られたものです
ブラウザの結果:
ブラウザ コンソールで親コンポーネント データを取得することもできます。
$parent サブコンポーネントは、親コンポーネントのデータを取得します。
各子コンポーネントには親コンポーネントが 1 つだけあり、子コンポーネントは親コンポーネントの名前を宣言せずに、$parent を介して親コンポーネントのデータを直接取得できます。
コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
你好，{
{name}}
<dawa></dawa>
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
var dawa={
template:`
<div>
子组件----{
{childName}}--{
{age}}
<!--在子组件中写了一个按钮操作修改父类的name属性-->
<button type="button" @click="updateFu">改父类名</button>
</div>
`,
data() {
return {
childName:"大娃",
age:18,
}
},
methods: {
updateFu(){
this.$parent.name="爹爹"//点击后修改父类名称改为爹爹
}
},
}
let app=new Vue({
el:"#app",
data() {
return {
name:"父类"
}
},
components:{
dawa
},
})
</script>
</html>以下の結果は、クリックした後の結果です
正式な父と子のコミュニケーション:
市販されている方法のほとんどはこの父と子のコミュニケーション方法を使用しており、比較的単純で粗雑なタイプのものは理解するのが少し難しいでしょう。
子コンポーネントは親コンポーネントのデータを取得します。
値渡しの属性名の規則:
- 親コンポーネントによって渡される属性名は、子コンポーネントの属性名と同じであってはなりません
- 親コンポーネントによって渡される属性名は大文字ではなく、英語のアンダースコア「_」で区切ることができます。
値による書き込み:
age 属性は固定値、name は単一のデータ バインディング、および親コンポーネントの name 属性バインディングです。
<dawa age="18" :name="name"></dawa>書き込みメソッドを取得します。
取得するサブコンポーネントのデータと同じレベルで props を記述します。
props:["age","name"]コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
你好，{
{name}}
<dawa age="18" :name="name"></dawa>
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
var dawa={
template:`
<div>
子组件----{
{childName}}--{
{age}}
<br>
<!--在子组件中将获取的属性简单演示一下-->
父组件----{
{age}}--{
{name}}
</div>
`,
data() {
return {
childName:"大娃",
age:18,
}
},
props:["age","name"],
}
let app=new Vue({
el:"#app",
data() {
return {
name:"父类"
}
},
components:{
dawa
},
})
</script>
</html>ブラウザの結果:
親コンポーネントは子コンポーネントのデータを取得します。
親コンポーネントは、$emit およびカスタム イベントを使用して子コンポーネントのデータを取得します。
親コンポーネントは、子コンポーネントのデータを取得するために 2 つのことを行う必要があります。
親コンポーネントが子コンポーネントを使用する場合、カスタム イベントを子コンポーネントにバインドする必要があります。
<!--@zidingyi是一个自定义事件，此事件会在后面在子组件注册-->
<dawa @zidingyi="fuFun" ></dawa>//父组件里的方法
methods:{
fuFun(val){
// 拿到数据
console.log(val);
}
}サブコンポーネントが率先してこのイベントをトリガーし、データを渡します。
//点击后给父组件传值
template:`
<div>
<button @click="butFun">给父组件传值</button>
</div>
`,//子组件里的方法
methods:{
butFun(){
// 子组件触发自定义事件zidingyi，同时传递数据
this.$emit('zidingyi','数据1');
}
}コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
你好，{
{name}}
<dawa @zidingyi="fuFun" ></dawa>
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
var dawa={
template:`
<div>
子组件----{
{childName}}--{
{age}}
<button @click="butFun">给父组件传值</button>
</div>
`,
data() {
return {
childName:"大娃",
age:18,
}
},
methods:{
butFun(){
this.$emit('zidingyi',this.childName);
}
}
}
let app=new Vue({
el:"#app",
data() {
return {
name:"父类"
}
},
methods: {
fuFun(val){
console.log(val);
}
},
components:{
dawa
},
})
</script>
</html>クリックすると、親クラスのメソッドが実行され、サブクラスのデータがコンソールに表示されます。
ブラウザの結果:
親子以外のコンポーネントの通信:
非親子コンポーネント通信とは、子コンポーネントが別の子コンポーネントとデータを転送でき、子コンポーネントと親コンポーネントも相互にデータを転送できることを意味します。
コミュニケーションは 3 つのステップに分かれています。
パブリックコンポーネントを作成する
Vue.prototype.$middleBus = new Vue();送信者はパブリック コンポーネント上でイベントをトリガーします
this.$middleBus.$emit('zhidingyi','你好,我是'+this.childName);受信側はパブリック コンポーネント上でこの zhidingyi イベントをリッスンし、データを受け取ります
このコードは通常、デプロイ後に 1 回だけ実行されるライフ サイクル フックに記述され、マウントされたフックが最適です。
this.$middleBus.$on('zhidingyi',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向dawa
console.log(this.childName+"接收到了值，值是："+val);//在控制台打印一下
});コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
你好，{
{name}}
<dawa></dawa>
<erwa></erwa>
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
//在Vue类的原型对象上，增加一个公共组件
Vue.prototype.$middleBus = new Vue();
var dawa={
template:`
<div>
子组件1----{
{childName}}--{
{age}}
<button @click="butFun">给其他人传值</button>
</div>
`,
data() {
return {
childName:"大娃",
age:18,
}
},
methods: {
butFun(){
this.$middleBus.$emit('zhidingyi','你好,我是'+this.childName);
}
},
}
var erwa={
template:`
<div>
子组件2----{
{childName}}--{
{age}}
</div>
`,
data() {
return {
childName:"二娃",
age:12,
}
},
mounted() {
this.$middleBus.$on('zhidingyi',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
console.log(this.childName+"接收到了值，值是："+val);//在控制台打印一下
});
},
}
let app=new Vue({
el:"#app",
data() {
return {
name:"父类"
}
},
components:{
dawa,erwa
},
})
</script>
</html>クリックすると、エルワはコンソールにデータを受け取りました
ブラウザの結果:
混入mixin：
Vue コンポーネントで再利用可能な機能を配布する非常に柔軟な方法を提供します。ミックスイン オブジェクトには、任意のコンポーネント オプションを含めることができます。コンポーネントがミックスイン オブジェクトを使用する場合、ミックスイン オブジェクトのすべてのオプションはコンポーネント自体のオプションに「混合」されます。
部分的に混合されているもの:
混合コンポーネントはその上に書き込まれる必要があります。そうしないと、エラーレポートは表示されません。
他のコンポーネントは、混合コンポーネントのプロパティを直接使用できます。
コードデモ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
你好，{
{name}}
<dawa></dawa>
<erwa></erwa>
</div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
var sanwa= {
data() {
return {
mixinname: '三娃',
};
},
mounted() {
console.log('我是混入的组件,我的名字叫:'+this.mixinname);
},
};
var dawa={
template:`
<div>
子组件1----{
{childName}}--{
{age}}--混入组件的名称：{
{mixinname}}
</div>
`,
data() {
return {
childName:"大娃",
age:18,
}
},
mixins:[sanwa]
}
var erwa={
template:`
<div>
子组件2----{
{childName}}--{
{age}}
</div>
`,
data() {
return {
childName:"二娃",
age:12,
}
},
mixins:[sanwa]
}
let app=new Vue({
el:"#app",
data() {
return {
name:"父类"
}
},
components:{
dawa,erwa
},
})
</script>
</html>ブラウザの結果:
グローバルミックスイン：
グローバル ミックスインはすべてのコンポーネントだけでなくインスタンスにも影響するため注意してください。
混ぜるか混ぜないかに関係なく、混ぜてくれるのですが、あまり役に立たず、基本的には必要ありません。
書き込み：
Vue.mixin(myMixin);最後に皆さんに一言：
