4R营销 颠覆4P的营销新论

4R营销 颠覆4P的营销新论

4P→4R产品Product→关系Relationship价格Price→节省Retrenchment渠道Place→报酬Reward促销Promotion→关联Relevancy从旧经济到新经济，再到后经济，营销模式也经历着重大变革。曾被奉为经典、独领风骚于一时的4P营销模式在后经济的推波助澜下，正掀起一场营销界的变革风暴。从4P—Product（产品）、Price（价格）、Place（渠道）、Promotion（促销）向4R—Relationship（关系）、Retrenchment（节省）、Reward（报酬）、Relevancy（关联）的转变由经济的转型引发，迅速渗透到营销的各个环节。作者深入剖析了世界经济体系在20世纪50年代以后的发展历程，揭示了4P营销乃至整个传统营销模式失效、瓦解的深层原因、精辟论证了这场转变的必然性，从全新角度阐述了正在崛起、欣欣向荣的4R营销。

文件&#file/f/25127180-513049387-49b805（访问密码：551685）

---

以下内容无关：

1. v-model实现自定义组件双向绑定
   v-model其实是个语法糖，如果没按照相应的规范定义组件，直接写v-model是不会生效的。再说一遍，类似于v-on:click可以简写成@click，v-model是两个表达式合在一起的简写。记住这个，下面具体说明。

1.1 input双向绑定
子组件MyInput.vue：

输入

父组件App.vue中使用：

{{haha}}

是一个语法糖（简写），它相当于：

<my-input
:value=“haha”
@input=“onInput”
/>

onInput(e) {
this.haha = e
}
两者效果一样，v-model减少了很多代码，不用你手动把传过来的值赋值给haha了，少定义了一个方法。作用还是挺明显的。

MyInput组件中的value不可以叫别的名字， e m i t 中 抛 出 的 方 法 也 只 能 叫 i n p u t ， 否 则 都 不 可 以 用 v − m o d e l 语 法 糖 ， 用 了 也 没 啥 效 果 。 另 外 ， 获 取 i n p u t 输 入 值 的 的 方 式 是 ： emit中抛出的方法也只能叫input ，否则都不可以用v-model语法糖，用了也没啥效果。 另外，获取 input 输入值的的方式是： emit中抛出的方法也只能叫input，否则都不可以用v−model语法糖，用了也没啥效果。另外，获取input输入值的的方式是：event.target.value，写成方法的话，$event实参省略了。

1.2. checkbox双向绑定
到了checkbox这，又有点不一样，首先，它绑定的值不叫value，触发事件也不叫input，具体看代码。

子组件MyCheckBox代码：

父组件App.vue中使用：

{{changeV}}

除了绑定的value变成了checked，@input变成了@change，传到父组件的参数是e.target.checked

注意： 绝大多数例子中，$emit中抛出的事件都是change，我这里写的是zhuangbi，其实只要和model模块中event属性值一样即可。

此外，外面的props也不可少。

2. .sync方式实现双向绑定
   如果需要对一个prop进行双向绑定，可以使用.sync语法糖。举一个使用场景的例子：别人封装好的 CheckBox 组件，需要做一些样式修改或者功能组合再使用，这就需要对 v-model 的值再来一次双向绑定。拿上面的 MyCheckBox 来说，，给这个checked传值可以用 props，但想把checked的值传给父组件并赋值给props的值，就有点麻烦，需要定义一个方法，使用$emit，父组件监听事件并作赋值操作。现在用.sync可以一句搞定。

子组件DiyCheckBox代码：

父组件App.vue中使用：

:diyCheck.sync="dCheck"这句代码相当于：

:diyCheck=“dCheck”
@update:diyCheck=“dCheck = $event”
语法糖作用很明显，大大简化了代码。

上面代码可以实现想要的功能，只是控制台会有一个警告：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “diyCheck”

found in

—> at src/components/DiyCheckBox.vue


避免直接改变props，使用data or computed代替。所以优化一下，换个写法：

使用计算属性后，@change事件都可以不要了，get()就是获取props传值，set(e)是MyCheckBox的v-model值改变了会触发的方法，这里面做法是直接把改变后的值通过$emit方式发出去。父组件中仍然通过.sync绑定，代码没有变化。

.sync可不光能用来做checkbox的双向绑定，涉及到props双向绑定的场景都可以用sync实现。

.sync传整个对象
如果有许多props属性需要做双向绑定操作，标签写起来就很长，像这样：

<coverage-charge
v-for="(item, index) in chargingPiles"
:key=“index + ‘index’”
:code.sync=“de”
:address.sync=“item.address”
:addressType.sync=“item.addressType”
:kind.sync=“item.kind”
:yearLimitType.sync=“arLimitType”

官方文档说可以简写成这样：

<coverage-charge
v-for="(item, index) in chargingPiles"
:key=“index + ‘index’”
v-bind.sync=‘item’

官方还说：

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

按照这个说法，item 的 5 个属性，都会通过 prop 传到子组件，我再在子组件中添加不同的computed属性即可：

真这样写，会发现&#de、this.address这些都是undefined，这里需要在子组件的props中再定义一遍属性名才行，可以省略各属性的type和default值：

props: [ ‘code’, ‘address’, ‘addressType’, ‘kind’, ‘yearLimitType’ ]
这样就可以了，.sync功能强大，用的地方也挺多的。

props里面东西太多的话，也可以统一定义成一个对象，然后父组件通过v-bind或者v-model传进来：

2.1.1 v-bind 方式

props: {
zb: {
type: Object,
default: () => {}
}
},
computed: {
code: {
get() {
return de
},
set(val) {
this.KaTeX parse error: Expected 'EOF', got '}' at position 32: …e', val) }̲ }, add…emit(‘update:address’, val)
}
}
}

<coverage-charge
v-for="(item, index) in chargingPiles"
:key=“index + ‘index’”
v-bind.sync=‘item’
:zb=‘item’

2.2.2 v-model方式 export default { model: { prop: 'zb', event: 'update' }, props: { zb: { type: Object, default: () => {} } }, computed: { code: { get() { return de }, set(val) { this.$emit('update:code', val) } }, address: { get() { return this.zb.address }, set(val) { this.$emit('update:address', val) } } } }