ホームページ >ウェブフロントエンド >jsチュートリアル >Vue2.0 の親コンポーネントと子コンポーネントは相互に機能を転送します (コードを使用)
今回は、Vue2.0の親コンポーネントと子コンポーネントの相互伝達関数(コード付き)をお届けします。 Vue2.0の親コンポーネントと子コンポーネントの相互伝達関数に関する注意点は次のとおりです。 、見てみましょう。
Vue.jsとは
Vue.js (/vjuː/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue は ボトムアップの増分開発で設計されています。 Vue のコア ライブラリは ビュー レイヤー のみに焦点を当てており、簡単に開始できるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、単一ファイル コンポーネントと Vue を操作する場合は、 エコシステムでサポートされているライブラリと組み合わせると、Vue は複雑な単一ページ アプリケーション用の ドライバー を提供することもできます。
研究メモ: vue2.0 では、親コンポーネントが子コンポーネントを呼び出すときに、親コンポーネントにも関数本体を渡したいと考えます。
1. props 経由: パラメータを子コンポーネントから親コンポーネントに渡す必要がある場合に適用されます
// 親コンポーネント.vue
<template> <p> <ok-input :params='number' :callback='callbackNum'></ok-input> </p> </template> <script type="text/ecmascript-6"> import okInput from '../ok-input/okinput.vue'; export default { props: {}, data() { return { number: {}, callbackNum: function (x) { console.log(x); } }; }, methods: { }, components: { 'ok-input': okInput } }; </script>
// subcomponent.vue
<template> <p> <input v-model='numVal' @change='handleFun'></input> </p> </template> <script type="text/ecmascript-6"> import {Input, Select, Option, Button} from 'element-ui'; import 'element-ui/lib/theme-default/index.css'; export default { props: { params: { type: Object, default: { type: '' } }, callback: {} }, data() { return { x: 'hah', numVal: '' }; }, methods: { handleFun(val) { this.callback(val); // 将参数传回父组件中的回调函数 } }, components: { 'el-input': Input, } }; </script>
2. $emit 経由: 現在の操作 オブジェクト を取得するだけです
// 父组件.vue <template> <p> <ok-input :params='inputs' @change='handleAge'></ok-input> </p> </template> <script type="text/ecmascript-6"> import okInput from '../ok-input/okinput.vue'; export default { props: {}, data() { return { number: {} }; }, methods: { handleAge(evt) { console.log(evt.target.value); // 接收从子组件传过来的当前对象 } }, components: { 'ok-input': okInput } }; </script>
// Subcomponent.vue
<template> <p> <input v-model='numVal' @blur='handleChange'></input> </p> </template> <script type="text/ecmascript-6"> import {Input, Select, Option, Button} from 'element-ui'; import 'element-ui/lib/theme-default/index.css'; export default { props: { params: { type: Object, default: { type: '' } }, callback: {} }, data() { return { x: 'hah', numVal: '' }; }, methods: { handleChange(evt) { this.$emit('change', evt); // 将当前对象 evt 传递到父组件 }, }, components: { 'el-input': Input, } }; </script>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がVue2.0 の親コンポーネントと子コンポーネントは相互に機能を転送します (コードを使用)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。