博客

父传子

第一种方法


父组件：

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子组件：

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

第二种方法

父组件：

<template>
	<div class="container">
		<!-- 组件 -->
		<tui-toast ref="toast"></tui-toast>
		<div  @click="showToast">
			自定义显示时间
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			showToast(type) {
				let params = {
					title: "操作成功",
					imgUrl: "/static/images/toast/check-circle.png",
					icon: true
				};
				this.$refs.toast.show(params)
			}
		}
	}
</script>

子组件：

<template>
	<div>
		{{options}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				options:"",
			};
		},
		methods: {
			show: function(options) {
				this.options=options
				console.log(options)  //传递过来的值
			},
		}
	}
</script>