Vue2.0 の親コンポーネントと子コンポーネントは相互に機能を転送します (コードを使用)-jsチュートリアル-php.cn

Vue2.0 の親コンポーネントと子コンポーネントは相互に機能を転送します (コードを使用)

php中世界最好的语言

リリース： 2018-04-17 13:43:06

オリジナル

2361 人が閲覧しました

今回は、Vue2.0の親コンポーネントと子コンポーネントの相互伝達関数(コード付き)をお届けします。 Vue2.0の親コンポーネントと子コンポーネントの相互伝達関数に関する注意点は次のとおりです。、見てみましょう。

Vue.jsとは

Vue.js (/vjuː/ と発音、ビューに似ています) は、ユーザーインターフェイスを構築するための進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発で設計されています。 Vue のコアライブラリはビューレイヤーのみに焦点を当てており、簡単に開始できるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、単一ファイルコンポーネントと Vue を操作する場合は、エコシステムでサポートされているライブラリと組み合わせると、Vue は複雑な単一ページアプリケーション用のドライバーを提供することもできます。

研究メモ: vue2.0 では、親コンポーネントが子コンポーネントを呼び出すときに、親コンポーネントにも関数本体を渡したいと考えます。

1. props 経由: パラメータを子コンポーネントから親コンポーネントに渡す必要がある場合に適用されます

// 親コンポーネント.vue

<template>
 <p>
  <ok-input :params=&#39;number&#39; :callback=&#39;callbackNum&#39;></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=&#39;numVal&#39; @change=&#39;handleFun&#39;></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=&#39;inputs&#39; @change=&#39;handleAge&#39;></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=&#39;numVal&#39; @blur=&#39;handleChange&#39;></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 サイトの他の関連記事を参照してください。