Vue 子コンポーネントと親コンポーネント間の通信 (コード付き)

1. 環境セットアップ

• vue-cli をダウンロードします: npm install -g vue-clinpm install -g vue-cli

• 初始化项目：vue init webpack vue-demo

• 进入vue-demo文件夹：cd vue-demo

• 下载安装依赖：npm install

• 运行该项目：npm run dev

2.父组件向子组件传值

• src/components/文件夹下建一个组件，Home.vue

• 创建子组件，在src/components/文件夹下新建一个文件夹，在新建文件夹中新建一个组件Child.vue

在Child.vue中创建props，用于接收父组件传递的值

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array
    }
}
</script>

<style  scoped>
    
</style>

在Home.vue中注册Child组件，并在template的p标签中添加home-child标签，标签中使用v-bind

プロジェクトを初期化します: vue init webpack vue-demo</ code ><br/></li><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/829/436/269/1533541837851476.png" class="lazy" title="1533541837851476.png" alt="Vue 子コンポーネントと親コンポーネント間の通信 (コード付き)"/></p> vue-demo フォルダーに入ります: <code>cd vue-demo

依存関係をダウンロードしてインストールします: npm install
< /li >

プロジェクトを実行します: npm run dev

2. 親コンポーネントが子コンポーネントに値を渡します

src/components/ フォルダー、Home.vue

サブコンポーネントを作成し、src/components/ フォルダーの下に新しいフォルダーを作成し、新しいコンポーネント Child.vue

新しいフォルダーに Child.vue に親コンポーネントから渡された値を受け取る props を作成

<template>
  <p class="hello">
    <home-child v-bind:c="c"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3]
    }
  }
}
</script>

<style scoped>

</style>

Home.vue に Child コンポーネントを登録し、テンプレートの p タグに home-child タグを追加します。 code>v-bind< タグ内の /code> 命令は c にバインドされます。子コンポーネントは、props を通じて親コンポーネントによって渡された値を受け取ることができます。

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
        <button v-on:click="ChildClick">点击向父组件传值</button>
        <span>{{data}}</span>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array,
        data: String
    },
    methods: {
        ChildClick: function () {
            this.$emit("ListenChild","I am child.vue")
        }
    }
}
</script>

<style  scoped>

</style>

Result

🎜3. 子コンポーネントは親コンポーネントに値を渡します🎜🎜クリックイベント ChildClick をボタンにバインドします🎜イベント関数で $emit を使用してカスタム イベントをトリガーし、このパラメーターを渡します。 is 子コンポーネントから親コンポーネントに渡される値です。 🎜

<template>
  <p class="hello">
    <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;Home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3],
      data: " "
    }
  },
  methods: {
    ShowChild: function (data) {
      this.data = data
      console.log("data:" + data)
    }
  }
}
</script>

<style scoped>

</style>

🎜親コンポーネントの home-child タグでカスタム イベントをリッスンし、イベントに応答するメソッド ShowChild を追加します。 🎜rrreee🎜結果: 🎜🎜🎜🎜ボタンクリック後: 🎜🎜🎜🎜関連記事: 🎜🎜vueコンポーネントと子コンポーネントと親コンポーネント間の通信を詳しく解説(2) 🎜🎜🎜🎜vue子コンポーネントと子コンポーネントと親コンポーネント間の通信を詳しく解説親コンポーネント🎜🎜

以上がVue 子コンポーネントと親コンポーネント間の通信 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。