Vue 组件传参 prop/emit

奋斗吧

擅长邻域：未填写

2023-07-29 18:24:05 299浏览

Vue 组件传参 prop/emit，当你在子组件定义了父亲组件传给子组件的props，定义之后也不需要去子组件就像一种嵌套引用关系，在这个关系中，经常会涉及相互传数据的需求，即父组件传子组件，子组件传父组件。组件之间的数据是要相互传递的，这里的组件对于整个页面来说，子组件和父组件。

学习了组件用法，就像一种嵌套引用关系，在这个关系中，经常会涉及相互传数据的需求，即父组件传子组件，子组件传父组件。

父、子组件的关系可以总结为： prop 向下传递（父传子）， emit 事件向上传递（子传父），如下图所示：

Vue 组件传参 prop/emit_Test

Vue 组件传参 prop/emit_vue.js_02

App.vue它是一个父组件，然后Test和HelloWord，这两个其实就是子组件。这里就是将父组件msg的值传递给了子组件。

<HelloWorld msg="Welcome to Your Vue.js App"/>

组件之间的数据是要相互传递的，这里的组件对于整个页面来说，子组件和父组件。

父组件要往子组件里面传数据，因为有时候子组件的页面展示内容是由你父组件决定的。那父组件给子组件传参的时候来决定子组件到底传递什么内容。

父组件是如何传递给子组件的数据？在子组件当中定义props属性即可。

<script>
export default {
  name: 'HelloWorld',   //当前页面的名称

//props定义了父组件传递给子组件的数据
  props: {
    msg: String
  }
}
</script>

或者下面写法也行
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      Type: String,
      default: ''
    }
  }
}

当你在子组件定义了父亲组件传给子组件的props，定义之后也不需要去子组件data里面去声明了，可以直接使用，将这个值放到template里面的。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

HelloWord.vue这个组件，这个页面，这个视图。这个标题是由父亲组件App.vue

<template>
  <!--<img alt="Vue logo" src="./assets/logo.png">-->
  <!--在下方局部注册了之后，就可以在vue文件当中使用-->
  <HelloWorld msg="这个是父组件定义的标题页"/>
  <div>
    <!--在mianjs全局注册后，即可通过组件名称全局使用-->
    <Test></Test>
  </div>
</template>

Vue 组件传参 prop/emit_vue.js_03

Vue 组件传参 prop/emit_前端_04

如果不希望写死，可以使用v-bind，前面使用了v-bind之后，在=""的时候就可以传递data属性里面的变量了。如果不使用v-bind，那么""里面就得写死了，不能写变量.

<HelloWorld :msg="msg"/>

App.vue

<template>
  <Test v-bind:name="name" :content=content></Test>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      name: "lucas very good",
      content: false
    }
  }
}
</script>

Test.vue

<template>
    <div>
        <button type="button" @click="btn()">Test按钮</button>
        <p>content value:{{ content }}</p>
        <p>name value:{{ name }}</p>

    </div>
</template>


<script>

export default ({
 //定义父亲组件传递给子组件的数据，属性名为test，类型为string
    props:{
      name: String,
      content: Boolean 
    }, 
    data() {
        return{

        }
    },
    methods:{
        btn(){
        //在js中使用props数据
        console.log(this.content)
        console.log(this.name)
        console.log("test按钮点击之后效果") 
        }
    }
})
</script>

Vue 组件传参 prop/emit_javascript_05

Vue 组件传参 prop/emit_vue.js_06

emit子传父亲(子组件调用父组件方法)

通过this.emit的方式去定义了一个事件，然后将数据放到事件里面去。在父亲组件里面去监听childmsg事件，绑定receive方法，通过receive方法接收子组件传过来的参数。（其实也就是在子组件里面发生了一个事件，这个事件通过emit来定义，最终在父组件里面去监听，监听到该事件，在方法里面拿到相应的数据）

父亲传子比较简单，子传父亲需要定义方法去接受它。

<template>
  <!--@是监听事件的，它就是监听childmsg的一个事件-->
  <Test v-bind:name="name" :content=content  @childMsg="receive"></Test>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      name: "lucas very good",
      content: false
    }
  },
  methods:{
    receive(data){
      alert(data)
      console.log(data)
    }
  }
}
</script>

<template>
    <div>
        <button type="button" @click="btn()">Test按钮</button>
        <button type="button" @click="btn1()">传递数据到父组件</button>
        <p>content value:{{ content }}</p>
        <p>name value:{{ name }}</p>

    </div>
</template>


<script>

export default ({
    props:{
      name: String,
      content: Boolean 
    }, 
    data() {
        return{
          Msg: "你好，我是子组件数据！"
        }
    },
    methods:{
        btn(){
            console.log(this.name)
            console.log(this.content)  
        },
        btn1(){
            //this.$emit用于将子组件的数据传递给父组件
            //第一个参数表示父组件接受的方法，第二个参数表示具体传递的值
            //emit就是子组件调用父组件的方法,这里触发了childMsg事件
            this.$emit('childMsg',this.Msg)
        }
    }
})
</script>

好博客就要一起分享哦！分享海报

此处可发布评论

评论（0）展开评论

暂无评论，快来写一下吧

展开评论

您可能感兴趣的博客