2. 程式人生 > >Vue父子元件的資料傳遞

Vue父子元件的資料傳遞

阿新 • • 發佈：2018-11-20 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子元件傳值</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--加上冒號是讓"0","1"成為js表示式，不是字串-->
        <counter :count="1" @inc="handleIncrease"></counter>
        <counter :count="3" @inc="handleIncrease"></counter>
        <div>{{total}}</div>
    </div>
<script>
    var
 
 counter = {
        props:['count'],
        data: function(){
            return{
                number:this.count
            }
        },
        template: "<div @click='handleClick'>{{number}}</div>",
        methods:{
            handleClick:function () {
                this.number = this
 
.number+2;
                this.$emit('inc',2) //每次點選按鈕都是向外觸發inc事件,步長為2
            }
        }
    };


    var vm = new Vue({
        el: '#root',
        data:{
          total:4
        },
        //註冊子元件
        components: {
            counter: counter
        },
        methods:{
            handleIncrease:
 
function (step) {
                this.total +=2
            }
        }
    })
</script>
</body>
</html>

<!--
父元件向子元件傳遞資料：通過屬性的形式向子元件傳遞資料,
                       父元件向子元件隨意的傳遞引數，但是子元件不能隨意修改父元件傳遞過來的引數(單項資料流)
                       解決上述問題吧辦法一：在子元件中建立data物件，建立副本，返回自己的number資料，修改自己就可以了

子元件向父元件傳遞資料:this.$emit
-->

 

相關推薦

vue父子元件資料傳遞方式

父元件向子元件傳值 父元件向子元件傳值簡單，直接在父元件中引用子元件時將資料繫結在子元件中，並在子元件的props屬性中接收即可。 以下是父元件，其中<keep-alive>標籤表示子元件，將created階段獲取的值singerData儲存到v

自學vue 之使用axios獲取ajax資料請求和首頁父子元件資料傳遞部分筆記

使用axios獲取ajax資料請求：       首先還是線上建立分支 git pull 拉到本地，並 git checkout index-ajax 切換到該分支，執行命令 npm install axios -- save 安裝 axios 依賴包 ，在首頁home.v

Vue父子元件資料雙向繫結，子元件可修改props

父元件 => props[parent-data] => 子元件 => watch[parent-data] => children-data = parent-data // 子元件監聽父元件的改變 子元件 => $emit[children

Vue父子元件的資料傳遞

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子元件傳值</title> <script src="./v

Vue 父子元件的資料傳遞、修改和更新

父子元件之間的資料關係，我這邊將情況具體分成下面4種： 父元件修改子元件的data，並實時更新    子元件通過$emit傳遞子元件的資料，this.$data指當前元件的data(return{...})裡的所有資料， this.$emit('data',this.

vue | 父子元件傳遞資料 slot-scope

父元件 Parent.vue // Parent.vue import child from './child' export default { components: { child } } 子元件 child.vue // child.vue e

vue父子元件之間的資料傳遞

父元件傳值 在vue中，子元件中預設無法訪問到父元件中data的資料和methods中的方法。 通過屬性繫結(v-bind)的形式 可以把父元件的資料傳遞給子元件 <div id='app'> <!-- com1:子元件-->

Vue父子元件之間的呼叫和資料傳遞

Vue父子元件之間的呼叫和資料傳遞 父子元件的定義 兩個檔案的父子元件 父子元件的定義 vue的官網上寫了一些關於父子元件的定義呼叫及值的傳遞。這裡我就不做過多的贅述了。我只說一下我在開發中遇到的一些小問題。 兩個

vue父子元件傳遞引數

父向子元件傳遞 　　　　在父元件裡子元件的模板裡寫上要傳遞的key和value   　　　　<child  key='value'></child>　或者 <child  :key='value'></child&

Vue中的父子元件通訊以及使用sync同步父子元件資料

 目錄 正文 前言： 之前寫過一篇文章《在不同場景下Vue元件間的資料交流》，但現在來看，其中關於“父子元件通訊”的介紹仍有諸多缺漏或者不當之處， 正好這幾天學習了關於用sync修飾符做父子元件資料雙向繫結的的用法， 於是決定寫一篇文章， 再次總結下“Vue中的父

vue.js 元件之間傳遞資料

前言 元件是 vue.js 最強大的功能之一，而元件例項的作用域是相互獨立的，這就意味著不同元件之間的資料無法相互引用。如何傳遞資料也成了元件的重要知識點之一。 元件 元件與元件之間，還存在著不同的關係。父子關係與兄弟關係（不是父子的都暫稱為兄弟吧）。

vue父子元件props傳值，如何在子元件method裡拿到父元件資料

子元件掛載的時候，props傳值，資料掛載命名：用駝峰命名法命名，在子元件在methods裡才可以通過this.xx獲取。注意命名要規範。父元件通過props傳值給子元件，子元件在methods裡要拿到父元件傳遞過來的資料有2種情況：第一種：父元件傳遞的引數是固定的，data

Vue 父子組件傳遞方式

pos prop itl component this min margin top methods 問題：parent.vue <template> <div> 父組件 <child :childObject="asyncO

vue父子元件之間通訊例項

一、父元件向子元件傳遞資料 ①獲取資料並在父元件上繫結資料 ②在子元件使用props接收父元件傳遞過來資料 ③將接收的資料繫結到子元件模板   二、子元件向父元件傳遞資料 ①在子元件上定義一個事件 如 @click='handleItemClick'

vue父子元件通訊傳值

父元件 -> 子元件 通過props來進行通訊 父元件程式碼: &lt;Children :dataName = "dataContent" /&gt; //dataName: 傳過去資料的名字 //dataContent: 傳過去的資料 子元件程式碼: &lt;

父子元件資訊傳遞

父元件資訊傳遞給子元件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script

VUE父子元件傳值問題

首先說頁面需要呼叫子元件的位置 這段程式碼的解釋：         如果showReport的值是true 那麼顯示子元件 向子元件傳引數 nameList（自定義的引數，可以自己任意取名） 而nameList對應的值是V

**Vue父子元件之間傳值：*

初學者總結。Vue父子元件之間傳值： 1.父元件到子元件的傳值： a,父元件引入元件並註冊完成： import PersonnelUpdate from “./PersonnelUpdate”; export default { components: { PersonnelUpdate }

vue父子元件生命週期函式執行順序

vue父元件載入和銷燬執行最後一個鉤子函式之前先執行一遍子元件的鉤子： 1.載入 父:beforecreate-created-beforeMount-（子:beforecreate-created-beforeMount-mounted）-mounted 2.銷燬 父:beforeDestroy--

Vue父子元件通訊，props和自定義監聽

1.子元件通過props接收父元件中的值，插入子元件中會跟隨父元件而變化。（：x="num"）--->頁面中插入{{x}} 2.如果只想變接收過來的值，而不改變父元件的，則吧接收過來的值存一下。（newx:this.x）--->頁面中插入{{newx}} 3.