vue组件之间的通信

props-父组件向子组件传输数据，兄弟组件不能通信。

 

 

 

<template>
  <div id="app">
      <HelloWorld   :persion="persion" :logPersion='logPersion'/>
  </div>

</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return {
        persion:{
          name:"张三",
          age:600,
        },
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    logPersion(name,age){
      alert(`姓名：${name} 年龄:${age}`);
    },
  }
}
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

　　

<template>
<div>
   <h1>props实现通信</h1>
   <!-- 父组件往子组件传数据通过props，子往父传通过方法 -->
<div>
  <h4>姓名：{{name}}</h4>
    <h4>年龄：{{age}}</h4>
    <h4>人-name：{{persion.name}}</h4>
    <h4>人-age{{persion.age}}</h4>
<button @click="logPersion('大李子',23)">点我试试</button>
</div>

</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  //第一种
  //props:['name','age'],
  //第二种
  // props: {
  //   name: String,
  //   age: Number,
  //   persion:Object,
  //   logPersion:Function,
  // },
  //第三种：required:true 不传name，虽然页面报错但是数据没影响，严谨。
    props: {
    name:{type:String,required:true,default:'聊客'},
    age: {type:Number,required:true,default:'13'},
    persion:Object,
    logPersion:Function,
  },
}
</script>

<style scoped>

</style>

　　

<template>
  <div id="app">
<HelloWorld @btnClick='deleteP'/>
<p ref="word" class="word"> 我是要被删除的标签</p>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },methods: {
    
    deleteP(args){
      console.log(args);
     this.$refs.word.remove();
    }
  }
}
</script>

<style>
.word{
   200px;
  height: 200px;
  background-color: #fff;
  color: red;
display: flex;
justify-content: center;
align-content: center;

}
</style>

　　

<template>
<div>
  <button @click="btnClick">删除父组件</button>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
  },
  methods: {
    btnClick(){
     // 告诉父组件点击了按钮
     this.$emit('btnClick',{name:'张三',age:23});
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>