vue----(組件)子組件和父組件

1.組件的定義

1.定義組件並引用 
2.父組件向子組件傳值
 3.子組件向父組件傳值

什么是組件

1.Html中有組件，是一段可以被復用的結構代碼
2.Css中有組件，是一段可以被復用的樣式
3.Js中有組件，是一段可以被復用的功能
4.Vue中也有組件，指的就是一個模塊，是一個獨立的，完整的（包含html，css，js等），可以直接拿來用的

組件特性

1.組件的實例化對象，跟vue實例化對象一樣，因此，我們也可以將vue實例化對象看成組件
2.組件間是獨立的，因此數據要獨立存儲，方法要獨立定義， 彼此間不能共享 。

2.父組件向子組件傳值

components/Child.vue 定義子組件

<template>
<div style="color: red"> 
<h1>子組件內容</h1> 
<p>{{data}}</p> 
</div> 
</template> 
<script> 
export default { // 子組件要使用父組件的數據，只需要一步，在 props中接收父組件的屬性 
props: ['data'], // 接收父組件給子組件定義的屬性 }
</script>

components/Father.vue 定義父組件

<template> 
<div> 
<h1>父組件內容</h1> 
父組件顯示:{{msg}} <!--3.第三步：把父組件的某一個屬性傳遞給子組件--> 
<Child :data='msg' ></Child> 
</div>
</template> 
<script>
// @指定的是src路徑 
import Child from '@/views/demo/Child' // 1.第一步：在父組件中導入子組件 
export default { 
// 2.第二步：父組件中注冊子組件 
components: { 
Child 
},data() { 
return {
 msg: '父組件的信息' 
} },
methods: {
 } 
}
</script>

router/index.js 中注冊路由

import Father from '@/views/demo/Father' 
Vue.use(Router) 
 {
      path: '/father',
      name: 'Father',
      component: Father
    },

3.子組件向父組件傳值

components/Child.vue 子組件通過觸發方法, 向父組件傳值

<template>
    <div style="color:red">
        <h1>子組件的內容</h1>
        <p>子組件顯示:{{data}}</p>
        <button @click="ccc">調用父組件方法</button>
    </div>
</template>

<script>
export default {
    // 子組件要使用父組件的數據,只需要一步,在props中接收父組件的屬性
    props:['data'],//接收父組件給子組件定義的屬性
    data() {
        return {
        
        }
    },
    methods: {
        //1.子組件調用父組件方法,並傳值
        //
        ccc(){
            this.$emit('chuan','子組件信息修改后的data信息,傳遞給父組件')
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>

components/Father.vue 給子組件添加事件及事件處理方法

<template>
    <div>
         <h1>父組件的內容</h1>
        <p>父組件顯示:{{msg}}</p>
        <!--3.第三步：把父組件的某一個屬性傳遞給子組件-->
        <Child
        :data='msg'
        @chuan='bbb'
        ></Child>
    </div>
</template>

<script>
import Child from '@/views/demo/Child' // 1.第一步：在父組件中導入子組件
export default {
    // 2.第二步：父組件中注冊子組件
    components:{
        Child
    },
    data() {
        return {
        msg:'父組件的信息'
        }
    },
    methods: {
        //4.在父組件中定義一個change方法，可以在子組件中觸發並傳值給父組件
        bbb(data){
            alert('小王:'+data)
            this.msg=data //更新父組件的內容
        }
    },
    created() {

    }
}
</script>

<style scoped>
</style>