vue复习（组件传值）

最新推荐文章于 2023-12-26 16:04:35 发布

webopenfather

最新推荐文章于 2023-12-26 16:04:35 发布

阅读量195

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_42714690/article/details/104527232

版权

语法

1、父组件->子组件：通过props接受父传递数据

步骤1：子通过props键来接受父传递过来的数据 props:[‘变量名1’,…,‘变量名n’]

步骤2：父传递给子

如果穿的值为变量 Boolean或 number 类型 父必须在调用子的组件上通过语法 
v-bind:子props中的变量名="父data中的键"

2、子组件->父组件：通过$emit创建自定义事件发送数据

步骤1：子创建自定义事件通过语法this.$emit(事件名称, 数据1, …, 数据n)
步骤2：父调用事件获取数据父必须在调用子的组件上触发事件 @自定义事="函数名"

留心1：函数在父定义
留心2：底层会将自定义事件中的数据传递给函数的形参

代码推进

 //子组件，发送数据
 mounted() {
    // 在这里面创建自定义事件 //触发自定义事件getSonData
    this.$emit("getSonData", this.myName2)
},

 <!-- 调用子组件 -->
<sontag @getSonData="showSonDataFn" v-bind:myName="sonName"></sontag>
 <!-- 父组件接受数据 -->
  methods: {
    showSonDataFn(data) {
        this.mySonData = data
    }
},

3、兄弟组件：通过EventBus（事件总线）

const eventBus = new Vue()  // 相当于创建一个组件数据共享中心
// 发送数据： eventBus.$emit(自定义事件名称，数据1，....，数据n)
// 接受数据： eventBus.$on(自定义事件名称，处理函数)


this.$emit("sonfn" ,this.fatherName)  
<son-tag :my-name="sonName" @sonfn="acceptdata"></son-tag>

代码推进:
父组件->子组件

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <fathertag></fathertag>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("fathertag", {
    // 声明模型数据
    data() {
        return {
            // 调用的时候注意大小写
            sonName: "赵冠希"  
        }
    },
    // 声明组件内容
    template: `
        <fieldset>
            <legend>父组件</legend>
            <div>
                <p>我是父组件，我儿子叫：{{sonName}}</p> 
                <sontag v-bind:myName="sonName"></sontag>
            </div>
        </fieldset>
    `,
    // 声明子组件
    components: {
        // 键就是组件标识
        sontag: {
            // 通过props键来获取父传递的数据
            props: ['myName'],
            template: `
                <fieldset>
                    <legend>子组件</legend>
                    <p>我是子组件，我爸爸给我取名：{{myName}}</p>
                </fieldset>
            `
        }
    }
})
let vm = new Vue({
    el: '#app',
    data: {

    }
})
</script>
</body>
</html>


子组件->父组件
<!DOCTYPE html>
<html lang="en">
<head>
<title>神龙教主</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <fathertag></fathertag>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 自定义组件fathertag输出：
// <div><p>我是父组件，我儿子叫：赵冠希</p>【<p>我是子组件，我爸爸给我取名：赵冠希</p>】</div>
// 其中子组件sontag部分：【】
// 变量：sonName-赵冠希

// 声明fathertag组件
Vue.component("fathertag", {
    // 声明模型数据
    data() {
        return {
            // 调用的时候注意大小写
            sonName: "赵冠希",
            mySonData: ""
        }
    },
    // 声明组件内容
    template: `
        <fieldset>
            <legend>父组件</legend>

            <div>
                <p>我是父组件，我儿子叫：{{sonName}}</p> 
                
                <!-- 调用子组件 -->
                <sontag @getSonData="showSonDataFn" v-bind:myName="sonName"></sontag>
                <p>
                    子的数据： {{ mySonData }}
                </p>
            </div>

        </fieldset>
    `,
    // 声明父普通函数
    methods: {
        showSonDataFn(data) {
            // console.log(data)
            this.mySonData = data
        }
    },
    // 声明子组件
    components: {
        // 键就是组件标识
        sontag: {
            // 简单理解：页面加载完毕 -> 组件渲染完毕会触发下面这个键
            mounted() {
                // 在这里面创建自定义事件
                this.$emit("getSonData", this.myName2)
            },
            // 通过props键来获取父传递的数据
            props: ['myName'],
            // 脚下留心：下props相当于下面data 
            data() {
                return {
                    myName2: "神龙教主"
                }
            },
            // 声明子组件内容
            template: `
                <fieldset>
                    <legend>子组件</legend>
                    <p>我是子组件，我爸爸给我取名：{{myName}}</p>
                </fieldset>
            `
        }
    }
})

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

    }
})
</script>
</body>
</html>

兄弟组件
<!DOCTYPE html>
<html lang="en">
<head>
<title>神龙教主</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
    <mytag1></mytag1>
    <mytag2></mytag2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建一个组件数据共享中心
const eventBus = new Vue()


Vue.component("mytag1", {
    // 声明组件模型数据
    data() {
        return {
            msg: "webopenfather",
            other: 66666
        }
    },
    // 声明组件内容
    template: `
        <fieldset>
            <legend>兄弟1</legend>
            <button @click="sendDataFn">点击传递数据</button>
        </fieldset>
    `,
    // 声明普通方法
    methods:{
        sendDataFn() {
            // 发送数据
            eventBus.$emit("mytag1MsgData", this.msg, this.other)
        }
    }
})
Vue.component("mytag2", {
    // 声明组件内容
    template: `
    <fieldset>
        <legend>兄弟2</legend>
        <p>{{data}}</p>
        <p>{{data2}}</p>
    </fieldset>
    `,
    // 声明自己的模型数据
    data() {
        return {
            data: "",
            data2: ""
        }
    },
    // 组件渲染完毕触发函数 
    mounted() {
        eventBus.$on("mytag1MsgData", (data, data2, data3) => {// 推荐写箭头函数
            console.log(data)
            console.log(data2)
            console.log(data3)
            // 将数据保存到自己的模型里面 -> 展示
            this.data = data
            this.data2 = data2
        })
    }
})

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

}
})
</script>
</body>
</html>