标签:htm com 解释 传值 驼峰 传递数据 col 浏览器 dex
父组件向子组件传递数据
定义父子组件的模板
<!--父组件模板--> <div id="app"> <!--把父组件的msg和str,传给组件cmsg和cstr--> <cpn :cmsg="msg" :cstr="str"></cpn> </div> <!--子组件模板--> <template id="mycpn"> <!--组件里,最好有一个div作为根元素--> <div> <h2>{{cstr}}</h2> <ul> <li v-for="(item,index) in cmsg">{{item}}</li> </ul> </div> </template>
父传子通常使用props,我们只需要在子组件使用props
// const cpn = {template:"",props:{}};//写法跟Vue.extend不同,内容一样 const cpn = Vue.extend({//设置子组件 template:"#mycpn", props:{//在子组件定义cstr和cmsg属性 cstr:{ type:String,//默认String类型 default() {//默认值 return ""; } }, cmsg:{ type: Array, default() { return []; } } } }); //父组件 const app = new Vue({ el:"#app", data() { return {//定义属性,传值给子组件 str:"这里是父组件传值给子组件", msg:["传值1","传值2","传值3","传值4"] } }, components:{//注册组件 cpn } })
注:HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
子组件向父组件传递数据
定义父子组件的模板
<!--父组件模板--> <div id="app"> <!-- itemclick是子组件$emit自定义事件, btn是父组件事件, 不写参数默认传递cbtn的item --> <cpn @itemclick="btn"></cpn> </div> <!--子组件模板--> <template id="mycpn"> <div> <button v-for="(item,index) in cmsg" @click="cbtn(item)">{{item.name}}</button> </div> </template>
子传父使用$emit
//设置子组件 const cpn = { template:"#mycpn", data(){ return { cmsg:[ { id: ‘1‘, name: ‘热门推荐‘ }, { id: ‘2‘, name: ‘手机数码‘ }, { id: ‘3‘, name: ‘家用家电‘ }, { id: ‘4‘, name: ‘电脑办公‘ } ] } }, methods: { cbtn(item) { //定义itemclick事件,通过$emit传值 this.$emit(‘itemclick‘, item) } } } //父组件 const app = new Vue({ el:"#app", methods:{ btn(item) {//获取子组件的值 console.log(item); } }, components:{ cpn } });
标签:htm com 解释 传值 驼峰 传递数据 col 浏览器 dex
原文地址:https://www.cnblogs.com/bushui/p/13061711.html