Vue には 3 つの値渡しメソッドがあります: 1. 「父から子」; 親コンポーネントは、prop を通じて子コンポーネントにデータを渡します (値渡し)。 2. 「息子から親へ」; 子コンポーネントは「イベント」を通じて親コンポーネントにメッセージを送信します。 3. 「非親子値転送」; 値を転送するための中間ウェアハウスとして機能するために、非親子コンポーネント間で共通のパブリック インスタンス ファイル「bus.js」を定義する必要があります。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
#Vue で一般的に使用される 3 つの値渡しメソッド:
1. 親コンポーネントが子コンポーネントに値を渡します:
親コンポーネント:
<template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></child> </div> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } } } </script>
子コンポーネント:
<template> <div> 子组件: <span>{{inputName}}</span> </div> </template> <script> export default { // 接受父组件的值 props: { inputName: String, required: true } } </script>
子コンポーネント:
<template> <div> 子组件: <span>{{childValue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childClick"> </div> </template> <script> export default { data () { return { childValue: '我是子组件的数据' } }, methods: { childClick () { // childByValue是在父组件on监听的方法 // 第二个参数this.childValue是需要传的值 this.$emit('childByValue', this.childValue) } } } </script>
親コンポーネント:
<template> <div> 父组件: <span>{{name}}</span> <br> <br> <!-- 引入子组件 定义一个on的方法监听子组件的状态--> <child v-on:childByValue="childByValue"></child> </div> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { childByValue: function (childValue) { // childValue就是子组件传过来的值 this.name = childValue } } } </script>
親以外のコンポーネントと子コンポーネントの間で値を転送するには、転送する中間ウェアハウスとして共通のパブリック インスタンス ファイル Bus.js を定義する必要があります。値を渡すと、ルーティング コンポーネントが相互に到達できなくなります。
パブリックバス.js
//bus.js import Vue from 'vue' export default new Vue()
コンポーネント A:
<template> <div> A组件: <span>{{elementValue}}</span> <input type="button" value="点击触发" @click="elementByValue"> </div> </template> <script> // 引入公共的bug,来做为中间传达的工具 import Bus from './bus.js' export default { data () { return { elementValue: 4 } }, methods: { elementByValue: function () { Bus.$emit('val', this.elementValue) } } } </script>
コンポーネント B:
<template> <div> B组件: <input type="button" value="点击触发" @click="getData"> <span>{{name}}</span> </div> </template> <script> import Bus from './bus.js' export default { data () { return { name: 0 } }, mounted: function () { var vm = this // 用$on事件来接收参数 Bus.$on('val', (data) => { console.log(data) vm.name = data }) }, methods: { getData: function () { this.name++ } } } </script>
関連する推奨事項:vue.jsチュートリアル###"###
以上がVueで値を渡す3つの方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。