万州建网站,国内外高校门户网站建设,长垣网站建设,自己做免费手机网站一、组件基础
1、单文件组件
第一步#xff1a;引入组件 import ComponentTest from ./components/ComponentTest.vue
第二步#xff1a;挂载组件 components: {ComponentTest }
第三步#xff1a;显示组件 ComponentTest/ComponentTest!-- 父组件 --…一、组件基础
1、单文件组件
第一步引入组件 import ComponentTest from ./components/ComponentTest.vue
第二步挂载组件 components: {ComponentTest }
第三步显示组件 ComponentTest/ComponentTest!-- 父组件 --
templateComponentTest/ComponentTest
/templatescript
import ComponentTest from ./components/ComponentTest.vueexport default {name: App,components: {ComponentTest}
}
/scriptstyle/style!-- 子组件 --
templateh3单文件组件/h3
/templatescript
export default {name: ComponentTest
}
/script!-- stye添加scoped修饰表示属性尽在当前组件中生效 --
style scoped
h3 {color: red;
}
/style二、Props组件交互(向下传递)
1、Props组件交互
!-- 父组件 --
templateh3prop组件交互/h3ComponentTest :messagemsg :valuesvalues/ComponentTest
/templatescript
import ComponentTest from ./components/ComponentTest.vueexport default {name: App,components: {ComponentTest},data() {return {msg: 数据信息,values: [1, 2, 3]}}
}
/scriptstyle/style!-- 子组件 --
templateh3单文件组件数据{{ message }}/h3ulli v-for(item, index) in values :keyindex{{ item }}/li/ul
/templatescript
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、自定义事件组件交互
!-- 父组件 --
templateh3自定义事件组件交互/h3ComponentTest onMsgGetMsg /ComponentTest
/templatescript
import ComponentTest from ./components/ComponentTest.vueexport default {name: App,components: {ComponentTest},methods: {GetMsg(data) {console.log(data);}}
}
/scriptstyle/style!-- 子组件 --
templatebutton clicksendClickHandle发送数据给父组件/button
/templatescript
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
!-- 父组件 --
templateh3组件生命周期/h3ComponentTest/ComponentTest
/templatescript
import ComponentTest from ./components/ComponentTest.vueexport default {name: App,components: {ComponentTest}
}
/scriptstyle/style!-- 子组件 --
templatep{{ msg }}/pbutton clickmsg 更新后更新数据/button
/templatescript
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
