组件与数据交互"/>
三、组件与数据交互
一、组件基础
1、单文件组件
第一步:引入组件 import ComponentTest from './components/ComponentTest.vue'
第二步:挂载组件 components: {ComponentTest }
第三步:显示组件 <ComponentTest></ComponentTest>
<!-- 父组件 -->
<template><ComponentTest></ComponentTest>
</template><script>
import ComponentTest from './components/ComponentTest.vue'export default {name: 'App',components: {ComponentTest}
}
</script><style></style>
<!-- 子组件 -->
<template><h3>单文件组件</h3>
</template><script>
export default {name: "ComponentTest"
}
</script><!-- stye添加scoped修饰,表示属性尽在当前组件中生效 -->
<style scoped>
h3 {color: red;
}
</style>
二、Props组件交互(向下传递)
1、Props组件交互
<!-- 父组件 -->
<template><h3>prop组件交互</h3><ComponentTest :message="msg" :values="values"></ComponentTest>
</template><script>
import ComponentTest from './components/ComponentTest.vue'export default {name: 'App',components: {ComponentTest},data() {return {msg: "数据信息",values: [1, 2, 3]}}
}
</script><style></style>
<!-- 子组件 -->
<template><h3>单文件组件数据:{{ message }}</h3><ul><li v-for="(item, index) in values" :key="index">{{ item }}</li></ul>
</template><script>
export default {name: "ComponentTest",props: {message: {type: String,default: ""},values: {type: Array,// 数组和对象的默认值必须使用函数返回default: function () {return [];}}}
}
</script><!-- stye添加scoped修饰,表示属性尽在当前组件中生效 -->
<style scoped>
h3 {color: red;
}
</style>
三、自定义事件组件交互(向上传递)
1、自定义事件组件交互
<!-- 父组件 -->
<template><h3>自定义事件组件交互</h3><ComponentTest @onMsg="GetMsg"> </ComponentTest>
</template><script>
import ComponentTest from './components/ComponentTest.vue'export default {name: 'App',components: {ComponentTest},methods: {GetMsg(data) {console.log(data);}}
}
</script><style></style>
<!-- 子组件 -->
<template><button @click="sendClickHandle">发送数据给父组件</button>
</template><script>
export default {name: "ComponentTest",data() {return {msg: "子组件数据"}},methods: {sendClickHandle() {// 父组件监听的事件名称,字符串 // 向父组件传递的参数this.$emit("onMsg", this.msg);}}
}
</script><!-- stye添加scoped修饰,表示属性尽在当前组件中生效 -->
<style scoped>
h3 {color: red;
}
</style>
四、组件生命周期
1、组件生命周期
创建:brforeCreate、created
渲染:brforeMount、mounted
更新:brforeUpdate、updated
卸载:brforeUnmount、unmounted
<!-- 父组件 -->
<template><h3>组件生命周期</h3><ComponentTest></ComponentTest>
</template><script>
import ComponentTest from './components/ComponentTest.vue'export default {name: 'App',components: {ComponentTest}
}
</script><style></style>
<!-- 子组件 -->
<template><p>{{ msg }}</p><button @click="msg = '更新后'">更新数据</button>
</template><script>
export default {name: "ComponentTest",data() {return {msg: "子组件数据"}},beforeCreate() {console.log("组件创建之前");},created() {console.log("组件创建之后");},beforeMount() {console.log("组件渲染之前");},mounted() {console.log("组件渲染之后");},beforeUpdate() {console.log("组件更新之前");},updated() {console.log("组件更新之后");},beforeUnmount() {console.log("组件卸载之前");},unmounted() {console.log("组件卸载之后");}
}
</script><!-- stye添加scoped修饰,表示属性尽在当前组件中生效 -->
<style scoped>
h3 {color: red;
}
</style>
更多推荐
三、组件与数据交互
发布评论