河北斯皮尔网站建设,做微信小程序和做网站,基础微网站开发公司,新的网站建设技术创建父子组建#xff0c;分三步。一是创建文件#xff0c;二是引入组建#xff0c;三是组件间通信。在components目录下新建sub文件夹#xff0c;用于存放一下可以复用的子组件。比如新建一个SubCon.vue组件
templatediv classfirst-app{{ ms…创建父子组建分三步。一是创建文件二是引入组建三是组件间通信。在components目录下新建sub文件夹用于存放一下可以复用的子组件。比如新建一个SubCon.vue组件
templatediv classfirst-app{{ msg }}button clickgetButtonClick{{ text || 确认 }}/button/div
/template
script
export default {name: Confirm,props: [text],data () {return {msg: sub compontsppp}},methods: {getButtonClick () {this.$emit(message, this.msg)}}
}
/script
style scoped
/style父组件的代码如下
templatediv classhelloh1{{ msg }}/h1testh2Essential Links/h2Confirm text注册 messagegetMessage/Confirm/div
/template
script
import Confirm from ./Sub/Confirmexport default {name: First,components: {Confirm},data () {return {msg: Welcome tssso Your Vue.js App111111111}},methods: {getMessage (val) {alert(val)}}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scopedh1, h2 {font-weight: normal;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}
/style即可创建父子组建并实现了组建间的通信问题
创建新的组件在index.js中别忘了添加引入
import Second from /components/Second
