vue學習（三）組件傳值

時間 2021-08-15

標籤 css html vue npm 數組 app ide 函數 this 欄目 CSS 简体版

原文原文鏈接

組件

官網(https://cn.vuejs.org/v2/guide/components.html)css

組件分爲局部組件和全局組件html

局部組件：是內容中國的一部分只是在當前組件加載的時候vue

所有組件：如：導航欄側邊欄運用到任意地方npm

一局部組件

簡單版數組

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>
    // App 組件  有 template + css + js
    // 1 生子
    const App = {
        template:`<h3>我是App組件</h3>`
    };

    let app = new Vue({
        el:'#app',
        data:{

        },
        // 2.掛子
        components:{
            App
        }
    })
</script>

複雜版-----主要是在生子處app

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>
    // App 組件  有 template + css + js
    // 1 生子
    // 在組件中的data數據 必須是一個函數，返回一個對象
    const App = {
        data() {
            return {
                msg: '我是App組件1'
            }
        },
        // template 標籤必須在一個
        template: `
                <div>
                <h3>{{ msg }}</h3>
                <button @click="handelClick">提交</button>
                </div>

                    `,
        methods:{
            handelClick(){
                alert(123)
            }
        }

    };

    let app = new Vue({
        el: '#app',
        data: {},
        // 2.掛子
        components: {
            App
        }

    })
</script>

二全局組件

全局組件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>
    // 定義一個全局組件

    Vue.component('Vheader',{
       template:`<h1>個人導航組件</h1>`
    });
    Vue.component('Vaside',{
       template:`<h1>個人左側導航</h1>`
    });
    // 局部組件
    const VConent = {
         template: `
                <div>
                    <h1>我是內容局部組件</h1>
                </div>

                    `
    };

    const App = {
        components:{
            VConent  // 掛載子組件
        },
        template: `
                <div>
                <Vheader></Vheader>
                <Vaside></Vaside>
                <VConent></VConent>   
                </div>

                    `

    };

    let app = new Vue({
        el: '#app',
        data: {},
        // 2.掛子
        components: {
            App
        }

    })
</script>

</body>
</html>

父傳子組件

① 在子組件中寫 props=[xxx] 接收父組件掛載的屬性---也能夠接收對象【能夠參考vue（四）做用域插槽】ide

② 父組件中綁定 xxx=‘msg’函數

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>

    Vue.component('Vchild',{
        template:`
               <div>
                <div style="color: red">我是子組件</div>
                <h3>{{ childMsg }}</h3>
                </div>
        `,
        props:['childMsg']
    });
    const App = {
        data(){
          return{
              msg:'我是父組件傳值'
          }
        },

        template: `
                <div>
                    <Vchild :childMsg="msg"></Vchild>
                </div>
                    `
    };

    let app = new Vue({
        el: '#app',
        data: {},
        // 2.掛子
        components: {
            App
        }

    })
</script>

</body>
</html>

子傳父

① 在父組件中要綁定自定義事件如： @input="inputHandler"ui

② 在子組件中觸發原生事件，在事件函數中經過this.$emit觸發自定義事件this

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>

    // 子組件

    // 子傳父
    // ① input框 在inputHandler使用
    Vue.component('Vchild', {
        template: `
               <div>
                <div style="color: red">我是子組件</div>
                <h3>{{ childMsg }}</h3>
                <input type="text" @input="inputHandler">
                </div>
        `,
        props: ['childMsg'],
        methods: {
            inputHandler(e) {
//                console.log(e.target.value)
                const val = e.target.value;
                this.$emit('Handlerinput', val)
            }
        }
    });
    // 父組件
    const App = {
        data() {
            return {
                msg: '我是父組件傳值',
                newVal:''
            }
        },
        methods:{
            inputVal(newVal){
                this.newVal = newVal
            }
        },
        template: `
                <div>
                    <Vchild :childMsg="msg" @Handlerinput="inputVal"></Vchild>
                    <div class="father">
                        數據：{{ newVal }}
                    </div>
                </div>
                    `
    };
    let app = new Vue({
        el: '#app',
        data: {},
        // 2.掛子
        components: {
            App
        }

    })
</script>

</body>
</html>

平行通訊

① 建立一個 bus

② 經過bus.$on 綁定事件

③ 經過 bus.$emit 觸發事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="vue.js"></script>

</head>
<body>

<div id="app">
    <App></App>
</div>

<script>

    const bus = new Vue();

    Vue.component('B', {
        data(){
            return {
                count:0
            }
        },
        template: `<div>{{count}}</div>`,
        // 當組件被建立出來的時候 就會當即被調用
        created(){
//            $on 綁定事件
            bus.$on('add',(n)=>{
                this.count+=n
            })
        }
    });
    Vue.component('A', {
        template: `
        <button @click="handleClick">加入購物車</button>
        `,
        methods:{
            handleClick(){
                // $emit 觸發事件
                bus.$emit('add',1);
            }
        }
    });
    
    const App = {
        template: `
        <div>
            <A></A>
            <B></B>
        </div>

        `
    };


    let app = new Vue({
        el: '#app',
        components: {
            App
        }

    })
</script>

</body>
</html>

組件通訊其餘方式（provide和inject）

在父組件中 provide 中提供變量，而後在子組件中經過inject來注入變量，不管組件嵌套多深，只要是調用了inject 就能拿到父組件中的變量

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="vue.js"></script>

</head>
<body>

<div id="app">
    <App></App>
</div>

<script>

    Vue.component('A', {
        inject:['msg'],　　// 數組接收　　
        template: `<div>{{msg}}</div>`,

    });


    const App = {
        provide(){
          return{
              msg:'老爹的數據'
          }
        },
        template: `
        <div>
            <A></A>
        </div>

        `
    };


    let app = new Vue({
        el: '#app',
        components: {
            App
        }

    })
</script>

</body>
</html>