Vue引入公共组件

• • vue页面1需要引入子组件vue页面2
  • 父子组件传参

vue页面1需要引入子组件vue页面2

1.在Vue页面1中添加

<template>
<Header></Header>//直接引用（要添加的子组件vue页面2  ）
</template>
           

2.在Vue页面1中添加

<script>
import Header from "./PublicHeader";   //这里引入组件vue页面2的位置
export default {
  components: {
    Header
  },//添加注册组件事件
}
</script>
           

3.子组件vue页面2内容为正常的vue页面，无需任何修改**

父子组件传参

1.父组件传参给子组件

父组件页面

<template>
<Header   :message="sendid"></Header>//直接引用（要添加的子组件vue页面2  ）用v-bind动态绑定参数
 <el-button size="mini" type="danger" @click="sendmsg">动态传参数</el-button>
</template>

<script>
import Header from "./PublicHeader";   //这里引入组件vue页面2的位置
export default {
  components: {
    Header
  },//添加注册组件事件
  data（）{
  return{
  sendid:"",
         }
  }，
  methods:{
  sendmsg(){
   this.sendid = 'LHC';
  }
  }
}
</script>
           

子组件页面

<template>
<div>
{{message}}     //父组件传过来的值
 <el-button size="mini" type="danger" @click="putmsg">打印参数</el-button>
</div>
</template>

<script>

export default {
 props: ["message"],        //创建props，name与父组件引用子组件的v-bind属性相同
  data（）{
  return{

         }
  }，
  methods:{
  putmsg(){
 console.log(this.message)
  }
  }
}
</script>
           

1.子组件传参给父组件

子组件页面

<template>
<div>
 <el-button size="mini" type="danger" @click="childsendmsg">传参数</el-button>
</div>
</template>

<script>

export default {

  data（）{
  return{

         }
  }，
  methods:{
  childsendmsg(){
 this.$emit("listenToChildEvent",'LHC');  //在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
  }
  }
}
</script>
           

父组件页面

<template>
<Header   v-on:listenToChildEvent="showMsgFormChild" ></Header>//监听子组件的$emit事件，listenToChildEvent与子组件定义的相同，
</template>

<script>
import Header from "./PublicHeader";   //这里引入组件vue页面2的位置
export default {
  components: {
    Header
  },//添加注册组件事件
  data（）{
  return{

         }
  }，
  methods:{
    showMsgFormChild(data) {        //与上面子组件v-on事件名相同
      console.log(data);                  //打印子组件传过来的值
    },
  }
}
</script>