今回は、VueJsの親子コンポーネント通信の注意点についてまとめてみました。
コンポーネント (親子通信)
1. 概要
コンポーネント内に別のコンポーネントを定義します。これを親子コンポーネントと呼びます。 1 ただし、次の点に注意してください。 1. 子コンポーネントは親コンポーネント (親コンポーネント Tempalte で記述) 内でのみ使用できます
2. デフォルトでは、子コンポーネントは親コンポーネントのデータにアクセスできません。コンポーネント インスタンス スコープは独立しています。
親と子間の通信を完了するにはどうすればよいでしょうか? 簡単に言うと、props が下にあり、event が up です。親コンポーネントは props を介して子コンポーネントにデータを渡し、子コンポーネントはデータを子コンポーネントに送信します。イベントを介した親コンポーネント
親 息子から息子への受け渡し: Props
息子から父親への受け渡し: 息子: $emit(eventName) 親 $on(eventName) 息子を訪問する親: ref
以下はケースの説明です3 つのケースのうち:
2. 父から息子への受け渡し: 小道具 コンポーネント インスタンスのスコープは分離されています。これは、子コンポーネントのテンプレート内で親コンポーネントのデータを直接参照できない (また、参照すべきではない) ことを意味します。子コンポーネントに親コンポーネントのデータを使用させるには、子コンポーネントの props オプションを使用する必要があります
Prop を使用したデータ転送には、静的フォームと動的フォームが含まれます。まず、静的 props
1、static props
<script></script>
<p>
<parent></parent>
</p>
<script>
//要想子组件能够获取父组件的，那么在子组件必须申明:props
var childNode = {
template: '<p>{{message}}',
props: ['message']
}
//这里的message要和上面props中值一致
var parentNode = {
template: `
<p class="parent">
<child message="我是">
<child message="徐小小">
`,
components: {
'child': childNode
}
};
// 创建根实例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script> を導入しましょう。 効果:
命名規則:
props によって宣言された属性の場合、親 HTML テンプレートでは、属性名をダッシュで記述する必要があります
子 props 属性を宣言する場合は、次のように記述できます小さなキャメルケースまたはダッシュ; 子テンプレートが親から渡された変数を使用する場合、対応するキャメルケースを使用する必要があります
上記の文は何を意味しますか?
<script>
//这里需要注意的是props可以写成['my-message']或者['myMessage']都是可以的
//但是template里的属性名，只能是驼峰式{{myMessage}}，如果也写成{{my-message}}那么是无效的
var childNode = {
template: '<p>{{myMessage}}',
props: ['myMessage']
}
//这里的属性名为my-message
var parentNode = {
template: `
<p class="parent">
<child my-message="我是">
<child my-message="徐小小">
`,
components: {
'child': childNode
}
};
</script>
childNode の myMessage を {{my-message}} に変更すると、実行結果が表示されます:
2. 動的小道具
テンプレートでは、親コンポーネントのデータを動的にバインドする必要があります。子テンプレートの小道具は、v-bind を使用した通常の HTML 機能へのバインドに似ています。親コンポーネントのデータが変更されると、その変更は子コンポーネントにも送信されます
var childNode = {
template: '<p>{{myMessage}}</p>',
props: ['my-message']
}
var parentNode = {
template: `
<p>
<child></child>
<child></child>
</p>`,
components: {
'child': childNode
},
data() {
return {
'data1': '111',
'data2': '222'
}
}
};
3. 数値を渡す
初心者がやりがちな間違いは、リテラル構文を使用して値を渡すことです
<script></script>
<p>
<parent></parent>
</p>
<script>
var childNode = {
template: '<p>{{myMessage}}的类型是{{type}}',
props: ['myMessage'],
computed: {
type() {
return typeof this.myMessage
}
}
}
var parentNode = {
template: `
<p class="parent">
<my-child my-message="1">
`,
components: {
'myChild': childNode
}
};
// 创建根实例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>
結果:
リテラルの小道具であるため、その値は数値ではなく
"1" になります。実際の数値を渡したい場合は、その値が JS式計算 として扱われるように v-bind を使用する必要があります。 文字列を数値に変換するには、実際には 1 か所だけ変更する必要があります。
var parentNode = {
template: `
<p>
//只要把父组件my-message="1"改成:my-message="1"结果就变成number类型
<my-child></my-child>
</p>`,
};
もちろん、v-bind を介して文字列型を渡したい場合はどうすればよいでしょうか?
動的プロパティを使用して、データ属性に対応する数値 1 を設定できます
var parentNode = {
template: `
<p>
<my-child></my-child>
</p>`,
components: {
'myChild': childNode
},
//这里'data': 1代表就是number类型，'data': "1"那就代表String类型
data(){
return {
'data': 1
}
}
};
3. 子から親へ: $emit $emit の使用法について
1. 親コンポーネントはプロパティを使用できます子コンポーネントに渡されるデータを転送します。
2. サブコンポーネントは $emit を使用して、親コンポーネントのカスタム イベントをトリガーできます。
子の主キー
<template>
<p>
<span>大连</span>
</p>
</template>
<script>
export default {
name:'trainCity',
methods:{
select(val) {
let data = {
cityname: val
};
this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
}
}
}
</script>
親コンポーネント
<template>
<traincity></traincity> //监听子组件的showCityName事件。
<template>
<script>
export default {
name:'index',
data () {
return {
toCity:"北京"
}
}
methods:{
updateCity(data){//触发子组件城市选择-选择城市的事件
this.toCity = data.cityname;//改变了父组件的值
console.log('toCity:'+this.toCity)
}
}
}
</script></template></template>
結果は次のとおりです: toCity: Dalian
2番目のケース
<script></script>
<p>
</p><p>{{ total }}</p>
<button-counter></button-counter>
<button-counter></button-counter>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}',
//组件数据就是需要函数式，这样的目的就是让每个button-counter不共享一个counter
data: function() {
return {
counter: 0
}
},
methods: {
increment: function() {
//这里+1只对button的值加1，如果要父组件加一，那么就需要$emit事件
this.counter += 1;
this.$emit('increment1', [12, 'kkk']);
}
}
});
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function(e) {
this.total += 1;
console.log(e);
}
}
});
</script>
詳細な説明:
1：button-counter作为父主键，父主键里有个button按钮。
2:两个button都绑定了click事件，方法里： this.$emit('increment1', [12, 'kkk']);，那么就会去调用父类v-on所监听的increment1事件。
3：当increment1事件被监听到，那么执行incrementTotal，这个时候才会把值传到父组件中，并且调用父类的方法。
4：这里要注意第二个button-counter所对应的v-on:'increment2,而它里面的button所对应是this.$emit('increment1', [12, 'kkk']);所以第二个button按钮是无法把值传给他的父主键的。
示例：一个按钮点击一次那么它自身和上面都会自增1，而第二个按钮只会自己自增，并不影响上面这个。
还有就是第一个按钮每点击一次，后台就会打印一次如下：
四、ref ($refs)用法
ref 有三种用法
1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3.如何利用v-for 和ref 获取一组数组或者dom 节点
1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
<script></script>
<p>
<component-father>
</component-father>
</p><p>ref在外面的组件上</p>
<script>
var refoutsidecomponentTem = {
template: "<p class='childComp'><h5>我是子组件"
};
var refoutsidecomponent = new Vue({
el: "#ref-outside-component",
components: {
"component-father": refoutsidecomponentTem
},
methods: {
consoleRef: function() {
console.log(this.); // #ref-outside-component vue实例
console.log(this.$refs.outsideComponentRef); // p.childComp vue实例
}
}
});
</script>
效果：当在p访问内点击一次：
2.ref使用在外面的元素上
<script></script>
<!--ref在外面的元素上-->
<p>
<component-father>
</component-father>
</p><p>ref在外面的元素上</p>
<script>
var refoutsidedomTem = {
template: "<p class='childComp'><h5>我是子组件"
};
var refoutsidedom = new Vue({
el: "#ref-outside-dom",
components: {
"component-father": refoutsidedomTem
},
methods: {
consoleRef: function() {
console.log(this); // #ref-outside-dom vue实例
console.log(this.$refs.outsideDomRef); // <p> ref在外面的元素上
}
}
});
</script>
效果：当在p访问内点击一次：
3.ref使用在里面的元素上---局部注册组件
<script></script>
<!--ref在里面的元素上-->
<p>
<component-father>
</component-father>
</p><p>ref在里面的元素上</p>
<script>
var refinsidedomTem = {
template: "<p class='childComp' v-on:click='consoleRef'>" +
"<h5 ref='insideDomRef'>我是子组件" +
"",
methods: {
consoleRef: function() {
console.log(this); // p.childComp vue实例
console.log(this.$refs.insideDomRef); // <h5 >我是子组件
}
}
};
var refinsidedom = new Vue({
el: "#ref-inside-dom",
components: {
"component-father": refinsidedomTem
}
});
</script>
效果：当在click范围内点击一次：
4.ref使用在里面的元素上---全局注册组件
<script></script>
<!--ref在里面的元素上--全局注册-->
<p>
<ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</p>
<script>
//v-on:input指当input里值发生改变触发showinsideDomRef事件
Vue.component("ref-inside-dom-quanjv", {
template: "<p class='insideFather'> " +
"<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
" <p>ref在里面的元素上--全局注册 " +
"",
methods: {
showinsideDomRef: function() {
console.log(this); //这里的this其实还是p.insideFather
console.log(this.$refs.insideDomRefAll); // <input type="text">
}
}
});
var refinsidedomall = new Vue({
el: "#ref-inside-dom-all"
});
</script>
效果：当我第一次输入1时，值已改变出发事件，当我第二次在输入时在触发一次事件，所以后台应该打印两次
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がVueJsの親子コンポーネントの通信方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。
JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。
JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。
javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。
整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
foreach是es6里的吗May 05, 2022 pm 05:59 PMforeach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 中国語版
中国語版、とても使いやすい
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ホットトピック
7345
15162714135252126525121429