重温vue父传子

重温vue父传子

第一步：新建一个vue3的demo

vue create vuedemo

第二步：运行demo

npm run serve

此时得到的demo目录如下：
App.vue是父组件
HelloWorld.vue是子组件

第三步：子组件

html部分
这里我们展示两个字段

<div>
  <span>{{ msg }}</span>
  <span>{{ toVal }}</span>
</div>

js部分

<scrpit>
  export defaule {
    props:{
		msg:String
	}
  }
</script>

这里要注意的是props在传递多个值时，并不是以数组的形式去书写代码
而是

<scrpit>
  export defaule {
	    props: {
		    msg: {
		      type: String,
		      default: () => "",
		    },
		    toVal: {
		      type: String,
		      default: () => "这是父传子的默认值",
		    },
	  },
  }
</script>

以对象的形式

第四步：父组件

html部分
接收两个字段

<HelloWorld msg="Welcome to Your Vue.js App" :toVal="name" />

js部分

<script>
//先引用子组件
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  //挂载子组件
  components: {
    HelloWorld,
  },
  data() {
    return {
      name: "我是张三",
    };
  },
};
</script>

子组件上传递两个值一个是静态写死的msg，一个是动态从父组件中获取的值name。

总结：父传子，顾名思义值是由父组件传给子组件的，最后显示在父组件上是因为这里子组件作用在父组件上，子组件也可以被别的页面引用，但是值还是由父组件传过去的。