体会组件中props和$emit的用法

news/2024/7/10 0:47:52 标签: vue


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="v-model-example" class="demo">
    <p>First name: {{ firstName }}</p>
    <p>Last name: {{ lastName }}</p>
    <user-name
     v-model:first-name="firstName"
     v-model:last-name="lastName"
   ></user-name>
 </div>

<script>
const UserName = {
  props: {
    firstName: String,
    lastName: String
  },
  template: `
    <input 
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
};

const HelloVueApp = {
  components: {
    UserName,
  },
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
};

Vue.createApp(HelloVueApp).mount('#v-model-example')
</script>


    <style>
        .demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
    </style>
</body>
</html>

体会组件中props和$emit的用法

相关文章

python在cmd中打印彩色文字

mybatis-plus使用对象属性进行SQL操作，经常会出现对象属性非表字段的情况，忽略映射字段使用以下注解

mysql 1054错误 Unknown column 'xxx' in 'field list'

Java @Override注解写与不写的区别

app没有被定义

解决Mybatis中出现的Invalid bound statement (not found)问题

pycharm报错：Process finished with exit code -1073741819 (0xC0000005)

引入插件的库的代码，babel.config.js