父传子
父容器
<template> <div> <zdy :module='test'></zdy> </div> </template> <script> import zj from "./zj"; // 父传子 export default { components:{ // 映射写法 'zdy':zj, // 另一种写法 直接写 // zj, }, data(){ return{ test:123 } } } </script>
子容器
<template> <div> <div v-html="module"></div> </div> </template> <script> export default { name: 'module', // 数组形式 props: ['module'], // 对象形式 这种 声明就要求 传过来的必须是 对象 规定了 type // props: { // seller: { // type: Object // } // },
//默认值 如果 传过来的值为空 则取default 的默认值
//props:{value:[number,string],default:0} } </script>
子传父 (可以通过$on来回调$emit给父级的值)
父容器
<template> <div> <zdy @sedParentDate='receptionChildDate'></zdy> </div> </template> <script> import zj from "./zj"; // 子传父 export default { components:{ // 映射写法 'zdy':zj, // 另一种写法 直接写 // zj, }, data(){ return{ } }, methods:{ receptionChildDate(data){ console.log(data) } } } </script>
子容器
<template> <div> <div @click="childClick">点我</div> </div> </template> <script> export default { name: 'module', // 数组形式 props: ['module'], // 对象形式 // props: { // seller: { // type: Object // } // }, methods:{ childClick(){ // 子传值到父(外部调用内部事件) this.$emit('sedParentDate','我是子组件传过来的值') } }, mounted () { this.$on('sedParentDate', (data) => { console.log('在自己这里打印出来', data) // 我是子组件传过来的值 }) } } </script>