- 单向数据流概念
所有的 prop 都使其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件 中，但是反过来则不行（子组件不能直接修改父组件传过来的值）。这样会防止从子组件意外变更父级 组件的状态，从而导致你的应用的数据流向难以理解。
每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一 个子组件内部改变 prop。如果你这样做了， Vue 会在浏览器的控制台中发出警告。
例 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个 计算属性：
父组件
<template> <div> <!-- 我是父组件 --> <child-page :size="size"></child-page> </div> </template> <script> import ChildPage from './child-page'; export default { components: { ChildPage }, data() { return { size: 'M' }; } }; </script>
子组件
<template> <div> <!-- 插值表达式使用normalizedSize属性渲染 --> <div>{{ normalizedSize }}</div> </div> </template> <script> export default { //props接收 props: { size: { type: String, default: null } }, //在computed节点中定义方法normalizedSize computed: { normalizedSize: function() { return this.size.toLowerCase(); //转换成小写 } } }; </script>
2、父组件通过ref调用子组件方法传值 this.$refs
例父组件：
<template> <div> <!-- 在子组件上绑定ref --> <child-page ref="childRef"></child-page> <el-button type="primary" @click="getChildInit()">点击按钮调用子组件方法</elbutton> </div> </template> <script> import ChildPage from './child-page'; export default { components: { ChildPage }, data() { return {}; }, created() {}, mounted() {}, methods: { //调用子组件initDate方法 getChildInit() { let val = "父组件传递值"; this.$refs.childRef.initDate(val); } } }; </script>
子组件
<template> <!-- 我是子组件 --> <div></div> </template> <script> export default { data() { return {}; }, created() {}, mounted() {}, methods: { //父组件调用 initDate(val) { //val是：父组件传递值 this.$message({ message: '我是子组件的方法', type: 'success' }); } } }; </script>
2）子组件传值给父组件
这里需要用到 vue 的一个实例方法**e m i t ∗ ∗ ， ∗ ∗ emit**，**emit∗∗，∗∗emit**通常用于子组件调用父组件方法，实现子组件主动与 父组件进行通讯传值。
语法：[vm.$emit( eventName, …args)]
参数： {string} eventName 事件名 […args] 参数 触发当前实例上的事件。附加参数都会传给监听器回调。
例
<template> <div> <!-- 我是子组件 --> <button type="default" @click="toParentData">触发事件传值给父组件</button> </div> </template> <script> export default { data() { return { title: '我是子组件' }; }, methods: { // 子组件调用vm.$emit方法 // 注意：这里的getData是父组件中绑定的事件名 toParentData() { this.$emit('getData', this.title); } } }; </script>
<template> <div> <!-- 父组件，通过@绑定了一个getChildData事件来监听子组件的触发事件 --> <child-page @getData="getChildrenData"></child-page> </div> </template> <script> import ChildPage from './child-page'; export default { components: { ChildPage }, data() { return { title: '' }; }, methods: { // 用自定义事件来接收子组件传的值 getChildrenData(e) { this.title = e; } } }; </script>
3 . 插槽的使用
插槽是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板 代码，如 HTML、组件等，填充的内容会替换子组件的标签。
1）默认插槽：在子组件内使用 slot 标签占位，在slot标签内的内容为默认内容，如果不传值，则显示默 认内容。
例：父组件默认展示子组件的内容，填充内容后替换默认内容
<!-- 我是父组件 --> <template> <!-- 展示子组件默认内容 --> <child-page></child-page> <!-- 展示父组件填充内容 --> <child-page>我替换了myslot</child-page> </template>
<!-- 我是子组件 --> <template> <div> <slot>默认显示我</slot> </div> </template>
2）具名插槽：一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据 这个名字把内容填充到对应插槽中。
- 在子组件的slot标签上设置name属性
- 父组件的template上结合 v-slot:子组件的name值 ，来指定对应的插槽 例：一个上中下布局，父组件填充到对应位置
<!-- 具名插槽子组件 --> <template> <div class="container"> <header> <!-- 我们希望把页头放这里 --> <slot name="header"></slot> </header> <main> <!-- 我们希望把主要内容放这里 --> <slot></slot> </main> <footer> <!-- 我们希望把页脚放这里 --> <slot name="footer"></slot> </footer> </div> </template>
<!-- 我是父组件 --> <template> <child-page> <!-- v-slot:子组件的name值，指定对应的插槽 --> <template v-slot:header> </template> <p>主要内容</p> <template v-slot:footer> <p>页脚</p> </template> </child-page> </template>
3）作用域插槽：子组件往插槽上绑定数据，父组件使用时可接收
- 在子组件slot标签使用v-bind绑定数据
- 使用组件时父组件在 template 标签上使用 v-slot=“变量名” 来接收子组件传递过来的数据 例：一个列表组件，在父组件触发点击按钮并获取参数
<!-- 列表子组件 --> <template> <div> <ul> <li v-for="(item,index) in list" :key="item.id"> <!-- v-bind绑定数据 --> <slot :item='item'></slot> </li> </ul> </div> </template> <script> export default { data () { return { list:[ { name:'作用域插槽1', id:1 }, { name:'作用域插槽2', id:2 }, { name:'作用域插槽3', id:3 } ] } } } </script>
<!-- 我是父组件 --> <template> <div> <child-page> <!-- v-slot="变量名" 来接收子组件传递过来的数据 --> <template v-slot="slotProps"> <el-button type="primary" @click="slotFn(slotProps.item)">父组件按钮 {{slotProps.item.id}}</el-button> </template> </child-page> </div> </template> <script> import ChildPage from './child-page'; export default { components: { ChildPage }, data() { return {}; }, methods: { slotFn(row){ this.$message({ message: row, type: 'success' }); } } }; </script>
() {
return {
list:[
{
name:‘作用域插槽1’,
id:1
},
{
name:‘作用域插槽2’,
id:2
},
{
name:‘作用域插槽3’,
id:3
}
]
}
}
}
```vue <!-- 我是父组件 --> <template> <div> <child-page> <!-- v-slot="变量名" 来接收子组件传递过来的数据 --> <template v-slot="slotProps"> <el-button type="primary" @click="slotFn(slotProps.item)">父组件按钮 {{slotProps.item.id}}</el-button> </template> </child-page> </div> </template> <script> import ChildPage from './child-page'; export default { components: { ChildPage }, data() { return {}; }, methods: { slotFn(row){ this.$message({ message: row, type: 'success' }); } } }; </script>
