この記事でわかることは、Vue での値の転送方法とは何ですか? Vue でよく使われる値の転送方法 (3 種類) を紹介します。必要な方は参考にしていただければ幸いです。
1. 親コンポーネントが子コンポーネントに値を渡します
1. props を使用してデータチャネルを確立します
// 这是父组件 <div id="app"> // 这是子组件 <child message="hello" ></child> </div>
2. 子コンポーネントは、props を介して値を親コンポーネントに渡します
1。子コンポーネントのカスタム イベント Vue,component('child',{
props:['message']
})
Vue.component('child',{ methods:{ handleClick(){ // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数 this.$emit('parentClick',123) } }, template:` <div> <h1>这是子组件</h1> <button @click="handleClick" > 发送给父组件 </button> </div> ` })
場合によっては 2 つのコンポーネントも渡す必要があります。値 (非親子関係) ) なので、値の受け渡しと取得を行うには public vue が必要です
1. 空の vue を作成しますVue.component('parent', {
data() {
return {
msg: '我是子组件'
}
},
methods: {
receiveMsg(value) {
console.log(value)
this.msg = value
}
},
template:' <div>
<h1>这是子组件</h1>
<p>接收子组件传过来的值{{msg}}</p>
<child @parentClick='receiveMsg'></child>
</div>
'
})
// 创建一个空的公共的vue对象 var bus = new Vue();
bus.$emit('test','数据')
もちろん、値の転送と取得に localstorage を使用することもできます。推奨事項:
Vue コンポーネント転送メソッド
以上がVueで値を渡すにはどのような方法がありますか? Vueでよく使われる値の受け渡しメソッドの紹介(3種類)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。