Vu_父子组件传递数据-父传子(数组方式)

备注:基础Vue2.x的语法

代码演示：以Vue根组件为父组件演示父组件传递数据给子组件

前期准备:

1. 创建父组件App.vue,子组件Child.vue
2. 在父组件内引入子组件
3. 在父组件内注册子组件
4. 在父组件模板中使用子组件标签

  <div id="app">
    <h1>我来自父组件data:{{ uname }}</h1>
    <h1>我来自父组件计算属性:{{ sum }}</h1>
    <!-- 使用子组件 -->
    <Child></Child>
  </div>
</template>

<script>
// 导入子组件
import Child from "./components/Child.vue";

export default {
  name: "App",
  data() {
    return {
      uname: "张三",
      num1: 10,
      num2: 50,
    };
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    },
  },
  components: {
    // 注册子组件
    Child
  },
};
</script>

使用步骤:

步骤1:在父组件模板中的子组件自定义标签Child内定义自定义属性

1. 如果该自定义属性用v-bind绑定,则属性值里被引号包裹的内容会被解析成变量
   • 该变量来源于父组件实例里data里或计算属性里computed的数据
2. 如果该自定义属性没有用v-bind绑定,则属性值里被引号包裹的内容会被解析成普通字符串

  <div id="app">
    <h1>我来自父组件data:{{ uname }}</h1>
    <h1>我来自父组件计算属性:{{ sum }}</h1>
    <!-- xxx是我们要传递给子组件的数据 -->
    <Child v-bind:uname_child="xxx"></Child>
  </div>
</template>

步骤2:给自定义属性绑定需要传递的数据

• 传递多个数据时,可以空格间隔

  <div id="app">
    <h1>我来自父组件data:{{ uname }}</h1>
    <h1>我来自父组件计算属性:{{ sum }}</h1>
    <!-- 把父组件实例data里的uname赋值给uname_child -->
    <!-- 把父组件实例计算属性computed里的sum赋值给sum_child -->
    <!-- 把普通字符串赋值给msg_child -->
    <Child v-bind:uname_child="uname" v-bind:sum_child="sum" msg_child="我没有被v-bind绑定"></Child>
  </div>
</template>

步骤3:子组件实例接收传递过来的数据

1. 在子组件实例的配置项props属性中,用数组的形式接收父组件传递过来的数据
2. 在数组中的每个成员都是之前我们在#步骤1#中定义的自定义属性名,一一对应
3. 每个成员用引号包裹,多个成员用逗号间隔

export default {
  name: "Child",
  props: ["uname_child", "sum_child", "msg_child"],
  data() {
    return {};
  },
};
</script>

步骤4:在子组件模板中使用传递过来的数据

  <div>
    <h2>我是子组件-----</h2>
    <h3>我是父组件data传递过来的:{{ uname_child }}</h3>
    <h3>我是父组件计算属性computed传递过来的:{{ sum_child }}</h3>
    <h3>我是父组件传递过来的普通字符串:{{ msg_child }}</h3>
    <!-- 其他方式使用:-->
    <h3 v-text="uname_child"></h3>
    <h3 v-html="uname_child"></h3>
    <input type="text" v-bind:value="uname_child" />
  </div>
</template>

浏览器渲染