vue中动态组件使用及传值方式_vue.js_

vue动态组件使用及传值

在项目中常常需要切换不同的组件，这时候我们就可以使用vue内置的动态组件的方式来实现。

component 组件：在页面中通过使用component元素，在根据组件中的is属性来动态的切换不同的组件。

demo：

子组件：

点击点击显示子组件按钮就可以实现动态组件之间的切换。

动态组件传参：

通过上面的demo可以实现组件之间的切换，其实也是可以给动态组件传值的。 

demo: 还是上面那个demo只不过在上面加上了一些传值的内容

//index.vue
  

 props:{//list.vue
    tt:{
      type:String
    },
    ff:{
      type:Array
    },
    yy:{
      type:String
    }},
     created() {
        console.log(this.tt)
        console.log(this.yy)
        console.log(this.ff)
  },

 props:{//foodNews.vue
    tt:{
      type:String
    },
    ff:{
      type:Array
    },
    yy:{
      type:String
    }
  },
   created() {
        console.log(this.tt)
        console.log(this.yy)
        console.log(this.ff)
  },

效果图：

通过控制台打印你会发现，只要绑定到动态组件上的属性，在每一个组件中都可以获取到，并且也可以在动态组件中绑定事件

keep-alive：动态切换掉的组件是被移除掉了，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

通过使用keep-alive来存储被移除的组件的状态。这样用户再切换回来的时候仍然可以看到之前的内容。

actived、deactivated钩子函数的使用

keep-alive可以配合actived、deactivated钩子函数使用，actived表示在keep-alive缓存组件被激活时调用。deactivated表示在 keep-alive 缓存的组件被停用时调用。因此我们可以在这个钩子函数中做一些逻辑数据处理

vue组件的定义使用及简单传值

组件：定义的组件是页面的一部分，组件具有共用行，复用性，组件内部的data数据是被当前调用组件独立使用的，不影响其他使用

全局组件：只要定义了，处处可以使用，性能不高，但使用起来简单

局部组件：定义了，只有注册才能使用，性能高，使用起来复杂

组件传值：父组件–》子组件

子组件通过props接受父组件传递来的值，子组件可以接受父组件传递来的String，Boolen,Number,Array,Object,Function这些数据类型

单项数据流概念：子组件可以使用父组件传递来的数据，但是绝对不能修改传递来的数据；子组件可以在data中添加一个属性值来接收父组件传递来的值，这样就可以修改值了，这里修改的是子组件自己的data值：如 newcount: this.count

如果子组件没有props接受父组件传递来的值，即Non-prop属性；那么父组件传递来的值就会成为子组件标签上的属性值

子组件通过事件向父组件传值

1.在子组件上添加自定义事件触发父组件methods中的方法，获取子组件传递来的值；

2.在子组件methods中添加方法，通过this.$emit(“父组件中自定义事件”，参数，…)触发父组件中的方法并传递参数

子组件也可以通过v-model进行数据之间的双向绑定：

const app = Vue.createApp({
			data() {
				return {
					count: 1,
					count2: 1
				}
			},
			template: `
			  
			`
		});
		app.component("childComponent", {
			props: ["count", "count2"],
			methods: {
				handelClick() {
					this.$emit("update:count", this.count + 4)
				}
			},
			template: `
			  
我是子组件：{{count}}:{{count2}}
			`
		})
		const vm = app.mount("#root");

父组件向孙子组件传值，即多层组件传值

通过在父组件中添加一个provide方法，并把要传递的值写入进去；

在孙子组件或者在下级组件中通过添加inject数组获取要传递的值

通过ref动态绑定组件，并通过this.$refs[‘组件名称’]获取组件的不同信息

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！