Vue组件多种通信方式

最新推荐文章于 2024-05-11 07:38:01 发布

小楼昨夜那事

最新推荐文章于 2024-05-11 07:38:01 发布

阅读量110

点赞数 1

分类专栏： Vue框架文章标签： vue.js

本文链接：https://blog.csdn.net/T_ambition/article/details/108984330

版权

Vue框架专栏收录该内容

15 篇文章 0 订阅

订阅专栏

组件间关系

组件间互相嵌套使用形成大概以下关系

父子

兄弟

祖先后代

组件分类

容器组件（父组件）

UI组件（子组件）

状态提升（数据）：一个容器组件中可以使用多个 UI组件应该将UI组件需要用到的数据都提升到

容器组件中管理（只负责展示数据和收集数据不做逻辑处理，逻辑应该在容器组件中处理）

组件通信

父-->子通信

<body>
  <div id="app">
    <home></home>
    <common-head ></common-head>
  </div>
  <template id="home">
    <div>
      Home组件
      <common-head :title="msg"></common-head>
    </div>
  </template>
</body>

<script>
  // 头部组件
const CommonHead = {
  props:['title'],    // properties
  template:`
    <div>
      我是头部组件
      <h2 :title="msg"> {{title}} </h2>
    </div>
  `,
  data () {
    return {
      msg: 'hello'
    }
  }
}

const Home = {
  template: "#home",
  components: {
    CommonHead
  },
  data () {
    return {
      msg: "我是home组件中的data数据"
    }
  }
}

Vue.component('Home',Home)
Vue.component('common-head',CommonHead)

const vm = new Vue({
  el: '#app',
  data: {
  }
}) 
</script>

子-->父通信

<body>
  <div id="app">
    <home></home>
  </div>
  <template id="Home">
    <div>
      Home组件
      <common-head :title="msg" @tt="receive"></common-head>
      {{msg}}
    </div>
  </template>
</body>
<script>
  // 头部组件
const CommonHead = {
  props:['title'],    // properties
  template:`
    <div>
      我是头部组件
      <h2> {{title}} </h2>
      <button @click="transfromEvent">点击向父传数据</button>
    </div>
  `,
  data () {
    return  {
      msg: '这是child数据'
    }
  },
  methods: {
    transfromEvent () {
      alert("发出一个数据"+this.msg);
      this.$emit('tt',this.msg)
    }
  }
}
const Home = {
  template: '#Home',
  components: {CommonHead},
  data () {
    return  {
      msg: '这是parent数据'
      }
  },
  methods: {
    receive(msg){
      alert('收到一个新数据'+msg);
      this.msg = msg;
    }
  }
}
Vue.component('Home',Home)
Vue.component('common-head',CommonHead)
const vm = new Vue({
  el: '#app',
  data: {
  }
})

下面是代码的运行过程，利用vue中的$emit来将子组件的data数据传输到父组件中

兄弟组件通信

<body>
  <div id="app">
    <home></home>
  </div>

  <template id="home">
    <div>
      <child1></child1>
      <hr>
      <child2></child2>
    </div>
  </template>
</body>

<script>
const bus = new Vue;
const Child1 = {
  template: `
    <div>
      子组件1
      <br><br>
      <button @click="transfromEvent">像兄弟传输数据</button>
    </div>
  `,
  data () {
    return {
      msg: '这是兄弟1',
    }
  },
  methods: {
    transfromEvent () {
      bus.$emit("tt",this.msg);
    }
  }
}
const Child2 = {
  template: `
    <div>
      子组件2
      <h2>{{msg}}</h2>
    </div>
  `,
  data () {
    return {
      msg: '这是兄弟2',
    }
  },
  mounted () {
    bus.$on('tt',(msg)=>{
      alert('收到了');
      console.log(this.msg,msg);
      this.msg = msg;
    })
  }
}

const Home = {
  template: "#home",
  components: {
    Child1,
    Child2
  },
  data () {
    return {
      msg: "我是home组件中的data数据"
    }
  }
}

Vue.component('Home',Home)

const vm = new Vue({
  el: '#app',
  data: {
  }
}) 
</script>

事件中心总线 eventBus 创建一个第三方的实例 const bus = new Vue();

提交数据 bus.$emit('事件')

监听数据 bus.$on('事件')

点击后

ref通信

<body>
  <div id="app">
	  <home></home>
	 
  </div>
  <template id="Home">
	  <div>
		  Home组件
		  <common-head ref="child"></common-head>
	  </div>
  </template>
  
  <script src="./vue.js"></script>
  <script>
	  // 头部组件
	 const CommonHead = {
		template:`
			<div>
				我是头部组件
				<h2> {{msg}} </h2>
			</div>
		`,
		data () {
			return {
				msg: '我是子组件数据'
			}
		},
		methods:{
			changeMsg () {
				this.msg = '改变啦'
			}
		}
	 }
    const Home = {
      template: '#Home',
			components: {
				CommonHead
			},
			data () {
				return {
					msg: '我是home组件中data中的数据'
				}
			},
			mounted() {
				console.log(this.$refs.child)
				const child = this.$refs.child;
				setTimeout(()=>{
					child.changeMsg();
				},2000)
			}	
    }

	Vue.component('Home',Home)

    const vm = new Vue({
      el: '#app'
    })
  </script>

父组件中 <child ref="child"></child>

{

mounted(){

this.$refs.child // 子组件的实例直接使用子组件上的属性和方法

}

小楼昨夜那事

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件多种通信方式

组件间关系组件间互相嵌套使用形成大概以下关系父子兄弟祖先后代组件分类容器组件（父组件）UI组件（子组件）状态提升（数据）：一个容器组件中可以使用多个UI组件应该将UI组件需要用到的数据都提升到容器组件中管理（只负责展示数据和收集数据不做逻辑处理，逻辑应该在容器组件中处理）组件通信父-->子通信<body> <div id="app"> <home></home> &l...
复制链接

扫一扫

专栏目录