vue 基础之父子组件传值

一.组件特点和传值的原因

组件特点：组件与组件之间是相互独立的，数据也是相互独立的，但是组件与组件之间不可避免的要进行数据通信。

组件与组件之间的关系不同，传值的方式也不同。分为三种关系：

• 父组件传值给子组件

• 子组件传值给父组件

• 非父子传值 (如vuex统筹管理)

二.父组件传子组件

下面这个demo 用的是js引入的方法，父组件绑定动态属性，子组件用props接收对应的值

注意，实际传值过程中，如果要改变props中的值，不能直接处理，一般用computed重新创建一个属性，做相对应的处理，

 <div id="app">
        父组件
        <son v-bind:str="msg"></son>
    </div>
    <template id="son">
        <h1>子组件
            
            <p> {{str}}</p>
           </h1>
    </template>
    <script src="./vue.js"></script>
    <script>
        let son = {
            template: "#son",
            props: ["str"]
        }
        const vm = new Vue({
            el: '#app',
            data: {
                msg: "父向子传值"
            },
            components: {
                son
            }
        })
    </script>

三.子组件向父组件传值

核心逻辑：子组件通过this.$emit("事件名"，值) 让父组件绑定这个事件名从而接收子组件传过来的值。

 <div id="app">
        父组件接收到子组件的值 {{msg}}
        <!-- 绑定一个事件 -->
        <son @to-father="qwe"> 父子组件传值</son>
    </div>
    <template id="son">
        <h1>子组件
            <button @click="sendFn"> 点击想父组件传值</button>
        </h1>
    </template>
    <script src="./vue.js"></script>
    <script>
        let son = {
            template: "#son",
            data() {
                return {
                    sonMsg: ""
                }
            },
            methods: {
                sendFn() {
                    let a = 123;
                    //子向父传值 用$emit 自定义事件$emit("自定义的事件名称","回调函数的实参")
                    this.$emit("to-father", a) //将事件定义，a作为实参传过去
                }
            }
        }
        const vm = new Vue({
            el: '#app',
            data: {
                msg: ""
            },
            methods: {
                qwe(a) {
                    console.log("传值中");
                    this.msg = a;
                }
            },
            components: {
                son
            }
        })
    </script>

以上就是全部的基础组件传值内容，如果有什么地方有问题，欢迎回访，希望以后的日子里能和大家共同进步！😊😊😊