一，子組件向父組件傳值（$emit）：

1、定義子組件

<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>

2、定義父組件

<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>

總結：
子組件向父組件傳值，同樣的他們之間的契合點也是子組件引入的地方。
首先來到子組件，用$emit發射數據
然后再來到父組件，在契合點的地方

二，父組件向子組件傳值（props）

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>

2、定義子組件

<template><div>子組件:<span>{{inputName}}</span></div> </template> <script>export default {// 接受父組件的值props: {inputName: String,required: true}} </script>

總結：
父組件想要向子組件傳值，那么必然有一個地方是相互銜接的，意思就是我們要找到父組件與子組件之間的那個契合點。
契合點就是：子組件引入的地方

那么我們可以自定義一個屬性來存放父組件向子組件傳遞的數據。

這樣，父組件就把值傳出去了，那么就回到子組件來接收這個值

到這里，子組件就拿到了父組件傳遞過來的值了
子組件使用該值

總結

以上是生活随笔為你收集整理的vue 父组件与子组件之间的传值（普通传值）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。